jQuery表单校验之Validate

原创 2016年08月28日 16:45:23

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:校验的具体参数
    

相关文章推荐

jquery validate表单校验

jquery validate label.uk-text-danger { color: #EA5200; } ...

java项目框架之jquery-validate 表单校验

java项目框架之jquery-validate 表单校验 使用技术:jquery-validate 验证规则与书写方法和样式无关,可以自行定义 实战 步骤1:导入jqeury 库文件 jquery-...

jQuery表单校验jquery.validate.js的使用

jQuery是一个快速、简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互。使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅...

jquery加强和表单校验插件的使用

  • 2017年11月16日 23:07
  • 170KB
  • 下载

jquery表单校验

  • 2015年12月11日 17:45
  • 38KB
  • 下载

jQuery表单校验 Validation

使用到的插件: jquery.js jquery.tools.js jquery.validate.js jquery.validate.methods.js 1、html页面(使用到...
  • zmm0420
  • zmm0420
  • 2015年12月09日 19:48
  • 247

表单校验jquery_checkform

核心提示:参数一为表单项数组(Json方式),必需参数二为表单是否为手动调用验证结果,默认为true,即为自动验证submit事件,可选;参数三为验证信息采用Alert提示方式,默认为否,可选。---...

jQuery学习--Chapter05小结(表单校验)

jQuery学习--Chapter05小结(表单校验) 1.正则表达式 正则表达式是一个描述字符模式的对象,它是由一些特殊符号组成,其组成的字符模式用来匹配各种表达式。 RegExp对象是Regula...

表单校验控件jQuery-Validation-Engine-master

1.使用方法: 必须引入的js、css文件: 1、在需要使用该插件的页面引入其css文件: 2、引入jquery.js 3、引入该插件的核心文件 4、引入该插件的校验规则文件...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery表单校验之Validate
举报原因:
原因补充:

(最多只允许输入30个字)