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验证插件的使用步骤详解

我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改。   记得以...
  • eson_15
  • eson_15
  • 2016年05月25日 23:41
  • 47619

Bootstrap和JQuery.validate表单校验

bootstrap表单和jQuery.validate表单校验等一些优秀的类库专为人们解决UI、表单校验问题。 下面就是我用bootstrap+jQuery.validate做的界面: b...
  • zsg88
  • zsg88
  • 2017年04月11日 17:35
  • 909

JQuery -- Validate, Jquery 表单校验

1. Jquery 表单验证需要插件 jQuery validation 1.7  ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassista...
  • xj626852095
  • xj626852095
  • 2014年02月17日 09:19
  • 673

jquery validate表单校验

jquery validate label.uk-text-danger { color: #EA5200; } ...
  • chengxusheji113
  • chengxusheji113
  • 2014年11月08日 16:13
  • 1603

Jquery validate插件之表单校验

需求: 通过validate插件来校验表单,validate是别人封装好的第三方工具技术分析: jqery validate一、validate使用步骤: 1. 导入jquer...
  • yaoyanbao1
  • yaoyanbao1
  • 2017年08月11日 13:16
  • 63

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

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

jQuery的validate表单校验

jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一、导入js库 /validate/jquery...
  • sinat_32023305
  • sinat_32023305
  • 2017年11月23日 09:31
  • 88

jQueryValidate 插件(表单验证功能)

validate表单验证插件
  • simple_smile_sun
  • simple_smile_sun
  • 2016年07月05日 14:12
  • 6323

让jquery validation plugin 支持zepto

欢迎使用Markdown编辑器写博客做移动端快一年了,一直纠结移动端是用zepto还是用jquery,移动端一直倾向于使用zepto,无奈zepto相关插件太少了,为了让jquery插件支持zepto...
  • weizengxun
  • weizengxun
  • 2015年03月25日 00:29
  • 6208

jquery.validate清除同表单的上次验证结果

validate=$("#AddTemp").validate({                 rules: {                     TempName: {       ...
  • jcc823110199
  • jcc823110199
  • 2014年06月11日 18:37
  • 1160
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery表单校验之Validate
举报原因:
原因补充:

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