一款轻量级原生js表单验证代码,主要是一些常用的密码、手机号码、邮箱和非空验证等。
js代码
<script src="diy-validation.js"></script>
<script>
window.onload = function () {
//使用规则
// 1. 给需要验证的input 添加类名 class="diy" 【必须】 diy-tips="我是为空验证的提示[可自定义]" 【必须】
// 如下示例
// <input type="text" class="diy"> //diy-tips="自定义提示" 如果不填写会使用默认星号标志
/*
// 2. 如果input 元素添加了 regular="自定义正则" 则必须添加 reg-tips="自定义的规则提示" 【必须】
<input type="text" id="name" class="diy" diy-tips="姓名不能为空"
regular="^[\u4e00-\u9fa5]+$" reg-tips="我是特殊的定义规则">
*/
// 3. 密码验证 需添加 name="pwd" 属性 【必须】
// 4. 确认密码验证 需添加 name="confirm-pwd" 【必须】
// 5. 手机号码验证 需添加 name="phone" 【必须】
//至此 即可完成自定义配置
//本插件 不依赖与任何第三方框架
//1. 下载该文件,直接 script 标签引入即可
//调用方法2
document.querySelector('.js-check1').onclick = function () {
var check1 = new Check({
el: '#diy1' ////必须挂载的对象
}).init();
console.log(check1);
if (!check1) { //是否通过验证
return false;
}
////以下是验证通过后的代码
alert('表单1验证通过!!!');
};
//调用方法2
document.querySelector('.js-check2').onclick = function () {
//实例化2 自定义规则参数
var check2 = new Check({
el: '#diy2', //挂载对象
//邮箱
emailRegular: '^[\\w._]+@([qQ][qQ]|[gG][mM][aA][iI][lL]|163)\\.[cC][oO][mM](\\r\\n|\\r|\\n)?$', //邮箱验证正则
emailRulesTips: '请输入正确邮箱',
//密码
pwdRegular: '^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$', //密码验证正则
pwdRulesTips: '输入密码与组合规则不一致',
//确认密码
confirmPwdTips: '2次密码不一致', //确认密码提示
//手机
phoneRegular: '^1(3|4|5|6|7|8|9)\\d{9}$', //手机号码正则
phoneRulesTips: '请输入正确的手机号' //手机号码验证提示
}).init();//带参数的初始化
if (!check2) { //是否通过验证
return false;
}
////以下是验证通过后的代码
alert('表单2验证通过!!!');
};
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791