一度让我头大到起飞的表单验证

表单验证在前端开发中非常非常常见，每次有需求时都不得不百度，匆匆忙忙，没有积累，也很零散。今天心血来潮想把它整理出来，有些粗糙，后续会继续修改 ^_^.

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()

继续更新中……