表单自动验证

最新推荐文章于 2025-04-13 16:28:55 发布

猫猫很优雅

最新推荐文章于 2025-04-13 16:28:55 发布

阅读量485

点赞数

分类专栏：验证文章标签：表单

验证专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个基于jQuery的表单验证插件实现方法。该插件提供了多种验证规则，如非空验证、正则表达式验证、等值验证等，并应用于用户名、密码、邮箱及手机号的输入检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<body>
<!--notNull regex ajax equalTo rangeLength-->
<form method="post" id="form1">
  <div> 用户名:
    <input type="text" name="userName" validate='[{"type":"notNull","msg":"用户名不能为空！"},{"type":"regex","reg":"^[a-zA-Z]{1}[a-zA-Z0-9]{2,9}$","msg":"用户名必须是字母开头并且不能少于3位不能多余10位"}]'/>
  </div>
  <div> 密码:
    <input type="password" name="password" validate = '[{"type":"notNull","msg":"密码不能为空！"}]' id="password"/>
  </div>
  <div> 确认密码:
    <input type="password" validate='[{"type":"notNull","msg":"确认密码不能为空！"},{"type":"equalTo","target":"#password","msg":"确认密码不一致"}]' name="confirmPassword" />
  </div>
  <div> 邮箱:
    <input type="text" name="email" validate='[{"type":"regex","reg":"^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$","msg":"邮箱不符合规范!"}]' />
  </div>
  <div> 手机号码:
    <input type="text" name="phone" validate='[{"type":"regex","reg":"^(1+[34578][0-9]{9})$","msg":"手机号码不符合规范!"}]' />
  </div>
  <input type="submit">
</form>
<script src="jquery.js"></script>
<script type="text/javascript" src="validate.js"></script> 
<script type="text/javascript">
    $(function(){
        $("#form1").validate();
    });
</script>

</body>

validate.js

/*
 * 
 *Jquery 的验证框架
 * 
 *notNull regex ajax equalTo rangeLength
 * 
 */
(function($){
    $.fn.validate = function(){
        //这里的this是Jquery的代理对象
        var form = this;
        var flag = true;
        form.submit(function(e){
            flag = true;
            e.preventDefault();
            form.find("input").each(function(){
                    $(this).blur();
            });
            if(flag){
                //解绑form表单注册的submit事件
                form.unbind("submit");
                form.submit();
            }
        });
        form.find("input").each(function(){
            //这里的this是当前迭代的dom对象
            var inputObj = $(this);
            //attr 代表的是html标签具备的属性
            //prop 代表的是js对象的属性 disabled checked
            var valiStr = inputObj.attr("validate");
            if(valiStr){
                inputObj.blur(function(){
                     //将json字符串转换成json对象
                    var validates = $.parseJSON(valiStr);
                    //[{"type":"notNull","msg":"用户名不能为空！"},{"type":"regex","reg":"","msg":""}]
                    for(var i = 0 ; i < validates.length ; i++){
                        var validate = validates[i];
                        //通过eval函数将 方法名执行获得函数实体对象
                        //eval(notNull); 将字符串当作js代码执行
                        var func = eval(validate.type);
                        if(func(inputObj,validate)){
                                tip(inputObj,'校验通过','blue');

                        }else{
                                tip(inputObj,validate.msg,'red');
                                flag = false;
                                return;
                        }
                    }
                });

            }
        });
        function notNull(obj,validate){
            var value = $.trim(obj.val());
            if(value.length==0){
                return false;
            }
            return true;
        }
        function regex(obj,validate){
            var regMatch = new RegExp(validate.reg);
            if(regMatch==null || regMatch =="null"){
                return true;
            }
            var result = $.trim(obj.val());
            if(!regMatch.test(result)){
                return false;
            }
            return true;
        }
        function equalTo(obj,validate){
            var v1 = $.trim(obj.val());
            var v2 = $.trim($(validate.target).val());
            if(v1==v2){
                return true;
            }
            return false;
        }
        function tip(obj,msg,color){
            var parent = obj.parent();
            var tips = parent.find("span");
            if(tips.length==0){
                obj.parent().append("<span><font color="+color+">"+msg+"</font></span>");
            }else{
                tips.html("<font color="+color+">"+msg+"</font>");
            }
        }

    }


})(jQuery);