万能的表单验证设计

平时用到的表单验证库，功能是异常的强大，但里面实际用到的却不多，为了几个验证就拖一个库，实在不值，不如自己设计个实用的函数解决这验证问题。
验证问题就是解决是还是不是的问题，是了就得提交，此外，用户体验也是个重点，正确，错误的消息怎么提示，所以，这个函数包括:

1.能对指定的多个字段进行验证
2.能够自定单个字段的验证方法
3.当验证失败时，可定义默认的消息提示方式
4.当验证失败时，可选择是否自动聚焦到元素
5.当验证成功时，可返回字段的提交字符串
6.字段元素既可传入ID也可传入name，name比ID要优先考虑
7.验证字段不依赖form

好了，这些功能够了吧，能应该验证N+1种表单了。
等会实现用到的相关函数,相信都很熟悉：

• 根据元素ID获得元素:function $(){}
• 返回一个表单元素的的提交字符形式:function queryString(){}
• 返回一个数组,常用于处理函数参数组:function $A(){}
• function isArray(){} ,function each(){}
• 查阅更多..

/**
 * 这个函数利用了JS动态语言特性,看上去很神秘,实际是很形象的,举个例子就明了.
 */
validate: function() {
  var args = CC.$A(arguments),
  form = null;
  //form如果不为空元素,应置于第一个参数中.
  if (!CC.isArray(args[0])) {
    form = CC.$(args[0]);
    args.remove(0);
  }
  //如果存在设置项,应置于最后一个参数中.
  //cfg.queryString = true|false;
  //cfg.callback = function
  //cfg.ignoreNull
  //nofocus:true|false
  var b = CC.isArray(b) ? {}: args.pop(),
  d;
  var queryStr = b.queryString,
  ignoreNull = b.ignoreNull,
  cb = b.callback;
  var result = queryStr ? '': {};
  CC.each(args,
  function(i, v) {
    //如果在fomr中不存在该name元素,就当id来获得
    var obj = v[0].tagName ? v[0] : form ? form[v[0]] : CC.$(v[0]);
    //console.debug('checking field:',v, 'current value:'+obj.value);
    var value = obj.value,
    msg = v[1],
    d = CC.isFunction(v[2]) ? v[3] : v[2];
    //选项
    if (!d || typeof d != 'object') d = b;
 
    //是否忽略空
    if (!d.ignoreNull && (value == '' || value == null)) {
      //如果不存在回调函数,就调用alert来显示错误信息
      if (!d.callback) CC.alert(msg, obj, form);
      //如果存在回调,注意传递的三个参数
      //msg:消息,obj:该结点,form:对应的表单,如果存在的话
      else d.callback(msg, obj, form);
      //出错后是否聚集
      if (!d.nofocus) obj.focus();
      result = false;
      return false;
    }
    //自定义验证方法
    if (CC.isFunction(v[2])) {
      var ret = v[2](value, obj, form);
      var pass = (ret !== false);
      if (CC.isString(ret)) {
        msg = ret;
        pass = false;
      }
 
      if (!pass) {
        if (!d.callback) CC.alert(msg, obj, form);
        //同上
        else d.callback(msg, obj, form);
 
        if (!d.nofocus) obj.focus();
        result = false;
        return false;
      }
    }
    //如果不设置queryString并通过验证,不存在form,就返回一个对象,
    //该对象包含形如{elementName|elementId:value}的数据.
    if (queryStr && !form) {
      result += (result == '') ? 
            ((typeof obj.name == 'undefined' || obj.name == '') ? obj.id: obj.name) +
                '=' + value: '&' + v[0] + '=' + value;
    } else if (!form) {
      result[v[0]] = value;
    }
  });
  //如果设置的queryString:true并通过验证,就返回form的提交字符串.
  if (result !== false && form && queryStr) result = CC.formQuery(form);
  return result;
}

 OK,关键部分已完成, 举个例子说明:

/**
 * validate应用例子
 */
 
//测试邮箱格式
function isMail(strMail) {
  return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(strMail);
}
 
//密码长度>=6
function checkPassword(v) {
  return v.length >= 6;
}
 
//两次密码要相同
function isTheSame(v, obj, form) {
  return form ? form.password.value == v: CC.$('password').value == v;
}
 
//出错时自定回调
function myCallback(msg, obj, form) {
  alert("出错显示的消息是:" + msg + " - 元素:" + 
          obj.name + ",所在form:" + (form ? form.id: '无'));
}
 
//存在Form的例子
function testForm() {
  var result = CC.validate('testForm', 
     ['username', '请输入用户名。'], 
     ['mail', '邮箱格式不正确。', isMail], 
     ['password', '密码长度大于或等于6。', checkPassword],
     //完整的配置示例
     ['password2', '两次密码不一致。', isTheSame, 
        {nofocus: false,callback: myCallback,ignoreNull: false}
     ], 
     {queryString: true});
 
  if (result !== false) alert("恭喜，通过验证!提交的字符串是:" + result);
 
  return result;
}
//无Form的例子.
function testNoForm() {
  var result = CC.validate( //既然没form了,这里不必存入form id作为第一个参数.
   ['username', '请输入用户名。'], 
   ['mail', '邮箱格式不正确。', isMail], 
   ['password', '密码长度大于或等于6。', checkPassword],
   ['password2', '两次密码不一致。', isTheSame, 
        {nofocus: false, callback: myCallback, ignoreNull: false}
   ], 
  //函数最后一个参数
  { queryString: true});
 
  if (result !== false) alert("恭喜，通过验证!提交的字符串是:" + result);
 
  return result;
}

 

是不是很方便,一看就会用?
只需要验证想要的东西!
以上只是列举一部份功能,更多功能请查看源码.

点击此处 下载本文可运行示例。