表单验证在前端开发中非常非常常见,每次有需求时都不得不百度,匆匆忙忙,没有积累,也很零散。今天心血来潮想把它整理出来,有些粗糙,后续会继续修改 ^_^.
step1: 首先定义一个Validator表单验证对象
var Validator = { isNoEmpty: function(){}, // 判断是否为空 maxlength: function(){}, //最大长度限制 isID: function(){}, // 身份证号码校验 isMobile: function(){}, // 手机号校验 isChineseName: function(){}, //中文名校验 onlyNum: function(){}, // 只能输入两位小数 };
step2: 在对应的HTML页面中使用时,只需要创建这个实例对象,调用对应的方法即可,如下:
var validator = Object.create(Validator); var isMobile = validator.isMobile(mobile, mobile.val(), '请输入正确的手机号码'); var isID = validator.isID(ID, ID.val(), '请输入正确的身份证号码');
step3: 补充Validator对象中的每个校验方法
1. 判断是否为空
三个参数:
element:当前的DOM节点value: 当前表单中的值errMsg: 错误提示信息isNoEmpty: function (element, value, errMsg) { if(value === ''){ return { type: 'isEmpty', errMsg: errMsg } } return true;},
2.最大长度限制
四个参数:
element:当前的DOM节点value: 当前表单中的值errMsg: 错误提示信息length:最大长度值maxlength: function(element, value, errMsg, length){ if(value.length > length){ return { type: 'overMaxlength', errMsg: errMsg } } return true;},
3.身份证号码校验
三个参数:
element:当前的DOM节点value: 当前表单中的值errMsg: 错误提示信息isID: function(element, value, errMsg){ var reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; if(!reg.test(value)){ return { type: 'isNoID', errMsg: errMsg } } return true; },
4.手机号校验
三个参数:
element:当前的DOM节点value: 当前表单中的值errMsg: 错误提示信息isMobile: function(element, value, errMsg){ var reg = /^\\d{11}$/; if(!reg.test(value)){ return { type: 'isNoMobile', errMsg: errMsg } } return true;},
5.中文名校验
三个参数:
element:当前的DOM节点value: 当前表单中的值errMsg: 错误提示信息isChineseName: function(element, value, errMsg){ var reg = /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]){2,}$/; if(!reg.test(value)){ return { type: 'isNoChineseName', errMsg: errMsg } } return true;},
6.只能输入最多含有两位小数的数字
一个参数:
value:当前文本框的值tips:在调用时可传入this.value,即this.value = validator.onlyNum(this.value)这样就能保证你修改的就是当前文本框对象的值,因为对象属于引用类型,如果没有深拷贝,则会修改它本身。onlyNum: function(value){ var newValue = value; newValue = newValue.replace(/[^\d.]/g,''); // 只留下数字和小数点 newValue = newValue.replace(/\.{2}/g,'.'); // 只保留第一个小数点,清除多余的 newValue = newValue.replace('.','$#$').replace(/\./g,'').replace('$#$','.'); newValue = newValue.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两位小数 if(newValue.indexOf('.')<0 && newValue !=''){ newValue = parseFloat(newValue); // 保证如果没有小数点,首位不能是01,02这种金额出现 } return newValue; }
强制数字保留两位小数时,使用toFixed(); 即 var num = parseFloat(num).toFixed()
继续更新中……