js–吐血总结最近遇到的变态表单校验—element+原生+jq+easyUI（前端职业生涯见过的最烦的校验）
- 2021 年 5 月 11 日
- 筆記
最近写了无数各种形式的表单，记录下奇奇怪怪的校验规则~
一：首先是element自带的rules校验规则：
element作为常用框架，自带rules属性简单易懂，官方文档一目了然，不再赘述，应付常用校验足够了，
相对麻烦的是自定义的校验函数，举个例子：
html部分：
1 <el-form id="form" 2 :rules="rules" 3 :inline="true" 4 :model="form" 5 size="medium" 6 ref="form" 7 label-position="right" 8 label-width="136px" 9 validate-on-rule-change 10 class="postForm" autocomplete="off" inline-message> 11 <el-form-item prop="phone"> 12 <el-input v-model="form.phone" name="phone" id="phone" size="medium" required> 13 </el-input> 14 </el-form-item> 15 <el-form-item prop="money"> 16 <el-input v-model="form.money" name="money" id="money" size="medium" required> 17 </el-input> 18 </el-form-item> 19 </el-form>
下面是js部分：
1 rules:{ 2 phone: [ 3 { required: true, message: '请输入手机号码', trigger: 'blur' }, 4 { validator:function(rule,value,callback){ 5 if(/^1[34578]\d{9}$/.test(value) == false&&/^\d{4}-?\d{4}$/.test(value) == false){ 6 callback(new Error("请输入正确的手机号或电话号码")); 7 }else{ 8 callback(); 9 } 10 }, trigger: 'blur' 11 } 12 ], 13 money: [ 14 {required: true, message: '请输入金额', trigger: 'change'}, 15 { validator:function(rule,value,callback){ 16 let num=Number(me.numRep)+Number(me.meetingForm.numWork) 17 if(/^\d+(\.\d{1,6})?$/.test(value) == false){ 18 callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000")); 19 }else if(Number(value) >num*550/10000){ 20 callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000")); 21 } 22 else{ 23 callback(); 24 } 25 }, trigger: 'blur'} 26 ] 27 }
接下来是调用：
1 formValidate(formName){ 2 this.$refs[formName].validate((valid) => { 3 if(valid) { 4 this.validateForm=true; 5 }else{ 6 this.$message.warning("请确认输入信息无误！"); 7 this.validateForm=false; 8 } 9 }); 10 return this.validateForm; 11 },
二：接下来也是比较常用的，jQuery+easyUI 的表单校验：
依旧直接上例子：
html部分：
1 <form id="formA" class="postForm" autocomplete="off"> 2 <table role="table" class="desigerTable" data-usage="基本信息录入" id="t5" cellpadding="10" cellspacing="10"> 3 <tbody> 4 <tr> 5 <td class="targetarea droppable"> 6 <div data-type="1"> 7 <div class="form-group"> 8 <label class="col-sm-4 control-label">总天数</label> 9 </div> 10 </div> 11 </td> 12 <td class="targetarea droppable"> 13 <div data-type="1" class="wrapper"> 14 <div class="form-group"> 15 <input class="form-control" placeholder="" id="days" 16 name="days" type="text"> 17 </div> 18 </div> 19 </td> 20 <td class="targetarea droppable"> 21 <div data-type="1"> 22 <div class="form-group"> 23 <label class="col-sm-4 control-label">总人数</label> 24 </div> 25 </div> 26 </td> 27 <td class="targetarea droppable" colspan="2"> 28 <div data-type="1" class="wrapper"> 29 <div class="form-group"> 30 <input class="form-control" placeholder="" id="person" 31 name="person" type="text"> 32 </div> 33 </div> 34 </td> 35 </tr> 36 </tbody> 37 </table> 38 </form>
js部分：
1 /** 2 * 校验主表单 3 */ 4 var formValidate = function () { 5 //表单验证规则 6 $("#formA").validate({ 7 ignore: "", 8 rules: { 9 days: {required: false,number: true,checkDur:true}, 10 person: {required: false,number: true,checkPerson:true}, 11 }, 12 messages: { 13 days: { 14 number: "请输入数字", 15 checkDays:"*总天数不超过2天，可输入小数，0.5，1，1.5！" 16 }, 17 person: { 18 number: "请输入数字", 19 checkPerson:"*请输入正整数！" 20 }, 21 }, 22 //是否在获取焦点时验证 23 onfocusout:false, 24 //是否在敲击键盘时验证 25 onkeyup:false, 26 //提交表单后，（第一个）未通过验证的表单获得焦点 27 focusInvalid:true, 28 //当未通过验证的元素获得焦点时，移除错误提示 29 focusCleanup:true, 30 }); 31 $.validator.addMethod("checkDays",function(value,element){ 32 if(value == 0.5||value == 1||value == 1.5||value == 2){ 33 return this.optional(element)||true 34 } 35 },"*总天数不超过2天，可输入小数，0.5，1.5！"); 36 $.validator.addMethod("checkPerson",function(value,element){ 37 var me = /(^[1-9]\d*$)/; 38 return this.optional(element)||(me.test(value)); 39 },"*请输入正整数！"); 40 /** 41 * 校验方法调用 42 */ 43 var dataValidate = function (data) { 44 if (!$("#formA").valid()) { 45 Util.alert("请输入正确的数据！"); 46 return false; 47 } 48 return data; 49 };
三：原生js form表单校验：
原生js校验可直接调用onclick，onfocus，onblur，onkeyup等事件来实现
（ps：原生真的永远的神，没有什么是原生js做不到的，如果做不到，就是我太菜了，继续滚去学原生。。）
继续简单明了举例子：
html部分：
1 <form action="example.html" method="post" enctype="multipart/form-data" class="register"> 2 <div> 3 <label for="idCode">身份证号</label> 4 <input type="text" id="idCode" class="idCode" name="idCode" placeholder="身份证号"/> 5 </div> 6 <div> 7 <label for="passwd">密码</label> 8 <input type="passwd" name="passwd" id="passwd" class="passwd" placeholder="密码"/> 9 </div> 10 </form>
js部分：
1 onload = function () { 2 blurElement(); 3 submitForm(); 4 } 5 //元素失去焦点时校验 6 function blurElement() { 7 //验证姓名 8 document.getElementById("ame").onblur = function () { 9 vailidateName(); 10 }; 11 12 //表单提交函数 13 function submitForm() { 14 let form = document.getElementsByClassName("register")[0]; 15 form.onsubmit = function (e) { 16 let flag =vailidateName()& vailidatePasswd()& vailidateID(); 17 return flag == 1 ? true : false; 18 }; 19 } 20 //验证身份证号码 18位 21 function vailidateID() { 22 let id = document.getElementById("idCode"); 23 let span = next(id); 24 let value = id.value; 25 //判断空 26 if (value == "") { 27 span.innerHTML = "身份证号码不能为空"; 28 span.style.color = "red"; 29 return false; 30 } 31 //判断长度 32 if (value.length != 18) { 33 span.innerHTML = "身份证号码长度18位"; 34 span.style.color = "red"; 35 return false; 36 } 37 //判断前17位数字 38 let reg = /^\d{17}$/; 39 let str = value.substring(0, 17); 40 if (!reg.test(str)) { 41 span.innerHTML = "身份证号码前17位必须是数字"; 42 span.style.color = "red"; 43 return false; 44 } 45 //验证密码:6-12位非空，必须包含大写字符，字母开头 46 function vailidatePasswd() { 47 let passwd = document.getElementById("passwd"); 48 let span = next(passwd); 49 let value = passwd.value; 50 let code = /^[a-zA-Z]$/; 51 //非空 52 if (value == "") { 53 span.innerHTML = "密码不能为空"; 54 span.style.color = "red"; 55 return false; 56 } 57 }
ok，结束，以上就是最近写的典型的前端校验表单例子，还在跟需求battle新的校验。。接下来都是更让人吐血的动态校验，写完了再更。。。
