关闭

jQuery表单校验之Validate

标签: jqueryhtml表单框架validate
246人阅读 评论(0) 收藏 举报
分类:

jQuery表单校验之Validate


一、相关网址

jQuery表单校验框架Validate的官方链接:官网
jQuery表单校验框架Validate的官方文档: 官方文档


二、 文件导入

文件导入


三、校验规则

校验规则

国际化后中文的一些默认值:

默认值


四、表单校验初探

Html代码:
<body>
        <form action="" method="post" id="myform">
            <div class="outer">
                <div class="inner">
                    <!--会员注册-->
                    <div class="register">
                        <font id="one">会员注册&nbsp;<font id="two">USER REGISTER</font></font>
                    </div>
                    <table class="fromTable">
                        <tr>
                            <td>用户名:<br /></td>
                            <td><input type="text" name="username" id="username"/><br /></td>
                            <td><div class="wearning" id="username_wearning"></div></td>
                        </tr>

                        <tr>
                            <td>密码:</td>
                            <td><input type="password" name="password" id="password" /></td>
                            <td><div class="wearning" id="password_wearning"></div></td>
                        </tr>
                        <tr>
                            <td>确认密码:</td>
                            <td><input type="password" name="repassword" id="repassword" /></td>
                            <td><div class="wearning" id="repassword_wearning"></div></td>
                        </tr>
                        <tr>
                            <td>Email:</td>
                            <td><input type="text" name="email" id="email"  /></td>
                            <td><div class="wearning" id="email_wearning"></div></td>
                        </tr>
                        <tr>
                            <td>姓名:</td>
                            <td><input type="text" name="name" id="name"  /></td>
                            <td><div class="wearning" id="name_wearning"></div></td>

                        </tr>
                        <tr>
                            <td>性别:</td>
                            <td>
                                <input type="radio" name="sex" checked="checked" /><input type="radio" name="sex"/></td>
                        </tr>
                        <tr>
                            <td>出生日期:</td>
                            <td><input type="date" name="date" id="date" value="2016-08-22"/></td>
                        </tr>
                        <tr>
                            <td>验证码:</td>
                            <td><input type="text" name="code" id="code" /></td>
                            <td><div class="wearning" id="code_wearning"></div></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input type="submit" value="提交"/ ></td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </body>

表单界面:
表单


 - 基本语法:
 $(...).validate({
    rules: {},                    //校验规则的选择
    messages:{}             //提示语法的定义

});

 - rules 规则语法:
    rules: {
            字段名:校验器,
            字段名:校验器
   }

 - 校验器语法:
语法:{校验器:值,校验器:值 ,...}

 - message 提示语法:
    message:{
            字段名:{校验器:"提示",校验器:“提示”} 
   }

表单验证js代码:

<script type="text/javascript">
    $(function(){
        //自定义邮箱验证函数注册
        $.validator.addMethod("emailCheck",function(value,element,params){
        /*
         *  value : 当前文本输入的内容
         *  element: 当前文本框
         *  params: 校验的具体参数
         */
        return /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.test(value);
        }," 邮箱格式有误");

        $("#myform").validate({
          rules: {
            username: {
              required: true,
              rangelength: [2,7]
            },

            password: {
                required: true
            },

            repassword: {
                required: true,
                equalTo: "#password"
            },

            email: {
                required: true,
                emailCheck: true
            },

          },

          messages:{
            username: {
                required: " 用户名不能为空",
                rangelength: " 用户名长度在{0}-{1}之间"
            },
            password: {
                required: " 密码不能为空"
            },

            repassword: {
                equalTo: " 您两次输入的密码不同"
            },

            //这里的信息是会被覆盖的
            email: {
                emailCheck: " 邮箱有误"
            }
          }
        });

    });
    </script>

以上代码邮箱验证用到了自定义校验

Validate自定义表单

直接拿官网的代码:

jQuery.validator.addMethod("math", function(value, element, params) {
  return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

基本的格式:

  • addMethod()格式:

    jQuery.validator.addMethod(name,method,message);
        //name: 自定义的方法名
        //method:函数体
        //message:提示信息
    
  • function()格式:

        function(value, element, params) {
              return flase;
    }
    //value:文本框中的内容
    //element: 当前文本框对象
    //params:校验的具体参数
    
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:32114次
    • 积分:701
    • 等级:
    • 排名:千里之外
    • 原创:37篇
    • 转载:10篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论