表单验证的做法

function checkForm(from){
    var from_text = $(from).find(‘input[type=text],input[type=password]‘),
    isok = true,
    Prompt = [
        {
            Type : "user",
            reg : /^[\u4e00-\u9fa5]{1,10}[·.]{0,1}[\u4e00-\u9fa5]{1,10}$/,
            msg : "请填写用户名",
            tipe : "用户名不能为空"
        },{
            Type :"psw",
            reg :/^[a-zA-Z0-9_]\w{5,17}$/,
            msg : "密码长度为6-18位字符数字",
            tipe : "密码不能为空"
        },{
            Type : "name",
            reg : /^[\u4e00-\u9fa5]{1,10}[·.]{0,1}[\u4e00-\u9fa5]{1,10}$/,
            msg : "请填写正确联系人",
            tipe : "联系人不能为空"
        },{
            Type :"phone",
            reg : /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
            msg : "请填写正确电话号码",
            tipe : "电话号码不能为空"
        }
    ];
    from_text.each(function(i){
        var val = $(this).val(),
        name = $(this).attr("name"),
        tip = $(this).attr("myAttr"),
        num = Prompt.length;
        if(tip){
            if (val == "") {
                alert(tip+"不能为空");
                isok = false;
                return false
            };
            for (var j = 0; j < num; j++) {
                if (name == Prompt[j].Type) {
                    if(!Prompt[j].reg.test(val)){
                        alert(Prompt[j].msg);
                        isok = false;
                        return false;
                    };
                };
            };
        }
    })
    return isok;
}

这是之前自己写的表单验证,缺点还是挺多需要依赖name属性来做验证查找(有对应name属性的进行验证没有的不验证),空的提示内容写在input的myttr属性里,每个表单的特别提示写在Prompt里面,依靠循环找到对应name进行验证

如果我在Prompt里面写很多的验证种类那么不就要循环好多次了(效率太低了咯!!!汗!!!),而且最不好的一点如果一个页面里有2个手机验证而且要提交不一样的name呢那怎么搞那同样的验证不一样name要写2个(这不科学啊!!!)

哎呦!最近进了新公司发现同事们写的封装性什么的都比我强太多了贴出来对比一;

(function (win, lib) {
    var patientInfo = {
        youngYear: 14,
        realNameReg: /^([a-z]|[A-Z]|[\u2E80-\u9FFF]){1,8}/,
        cardNumReg: /^([a-z]|[A-Z]|\d){1,18}/,
        idCardReg: /^\d{17}([a-z]|[A-Z]|\d){1}/,
        phoneReg: /^\d{11}$/,
        verify: function (el, verifyReg, verifyAlert, ignoreNull) {
            var verifyText = el.val().replace(/\t+/g, "").replace(/\n+/g, "").replace(/\r+/g, "").replace(/\s+/g, "");
            if (verifyText == "") {
                if (ignoreNull) {
                    return false;
                }
                lib.hkDialog({
                    type: 3,
                    sureCallBack: function () {
                    },
                    content: verifyAlert + ‘不能为空‘,
                    sureTxt: ‘我知道了‘
                });
                return true;
            }
            if (!verifyReg.test(verifyText)) {
                lib.hkDialog({
                    type: 3,
                    sureCallBack: function () {
                    },
                    content: ‘请输入正确的‘ + verifyAlert,
                    sureTxt: ‘我知道了‘
                });
                return true;
            }
            return false;
        }
    },
//这是完美分割线----------------------------------------------------------------------------------------------//下面是调用

submitFun: function() {  var that = this;
  $(‘.p-save‘).on(‘tap‘, function(e) {    var PActive = $(‘.p-active‘);    //名字    var name = PActive.find(‘.p-name‘);    if(that.verify(name, that.realNameReg, ‘真实姓名‘)) {return}    //验证完事true就是不通过    //下面还有点什么不重要的东西就不管了  }
document.addEventListener(‘DOMContentLoaded‘, function (e) {
        patientInfo.init();
    }, false);

})(window, window[‘lib‘] || (window[‘lib‘] = {}));

先说明下咯这个代码并不全(有一些其他的依赖组件),lib代表的是我们封装起来的其他公用调用的方法库(或者说组件调用的),像lib.hkDialog就是指的调用了一个类似弹窗提示的组件(简单说就是alert咯)哇!这样的封装很好啊!!!我又get到新技能了呢!下面还是讲讲这个组件的实现吧!

最上边那些正则其实和我写的那个是一个道理就是把要用来验证的方法,有3个参数一个是要验证的value,一个是上吧的验证正则,一个是提示语,还有一个是可否为空的选项

然后是去空格什么的,先判断ignoreNull如果是true就是可以空咯(然而我刚看到这里的时候我就想如果我想要不能为空又不要验证怎么办哦!!!我真是猪了!这样的情况直接去头尾空格然后判断是否为空不就完了!汗颜!!!)

验证完事true就是不通过(why?我都习惯返回是fales是不通过的,反了反了!可以少写一个!,我之前用这个找了好久问题后来看里面代码才发现的)
这个verify验证里面写得东西好少啊!但是这样用起来更加灵活了呢,
还比我的少了循环效率更好,
验证内容和正则传进去,提示语传进去基本上就可以了!用起来更方便灵活,以后就用这个吧!(不过我还是想把他返回的true和false反过来!嘿嘿!)
时间: 2024-10-09 01:49:56

表单验证的做法的相关文章

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

jQuery Validate 插件,表单验证功能

连接地址:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jör

JavaScript:综合案例-表单验证

综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须是4位数字,按照正则进行验证: .雇员姓名:不能为空: .雇员职位:不能为空: .雇员日期:按照"yyyy-mm-dd"的格式编写,按照正则进行验证: .基本工资:按照小数编写,小数为最多2位,按照正则进行验证: .佣金:难找小数编写,小数位数最多2位,按照正则进行验证. 具体步骤: 第一

JavaScript:基础表单验证

在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个基础的表单(从标准来讲每一个元素都一定要存在有一个ID属性) <form action="pass.html" method="post" id="loginForm"> <!--在以后的开发过程之中,必须要保证id与name属性内

表单验证——jquery validate使用说明【另一个教程】

[参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaefferer 编写和维护的,他

AngularJS 的表单验证

最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validation 今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要读的. 我们将重点放在客户端验证上,并使用Angular内置的表单属性.这里有一个 

Jquery.validate.js表单验证插件的使用

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q

python :表单验证--对每一个输入框进行验证

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>Title</title> <style> .error{ color

jquery插件,表单验证validation plugin的使用

笔记: 一.首先引入插件 <script type="text/javascript" src="js/jquery-1.10.0.js" ></script> <script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script> 列子:一个简单的登录表单验证 1 <form id=&quo