jQuery 表单验证插件之Validation.js简单入门练习- 凌波小屋

jQuery 表单验证插件之Validation.js简单入门练习-

首页 > 后端开发作者：凌波 2016-5-26 18:22:55 热度：6167° 字号：小中大评论：

时间：2016-5-26 18:22:55 热度：6167° 评论：

很早就耳闻jQuery 的表单验证插件Validation，VS里也将Validation作为默认的验证插件，可想其之强大。但是自己一直没去用它，不是因为它难掌握（也说不上难搞，这些东西demo一大推，都是往上套的工作），当然也不是因为自己特别挑剔，没有想象中那么强大、那么好用，只是自己觉得时机还未成熟，毕竟初学者，想自己通过做项目去练习那些jquery基础之类的东西，等达到一定的熟练度，再去用它或许正是最佳时机！
前些日子，正好有同学提起这个，于是乎，现在抽点时间来看看API写个简单基础点的demo：
之前做过的项目里有Validation的插件，就没有再去下载，或者通过VS里的nuget获取！
简单了解完这个插件后，发现跟之前了解过的插件（上传插件，弹窗插件，通知插件登等）都有个相似点，都是通过一个json数据去配置它所需的项。所以，这些插件都是很好上手的。

效果图：

QQ截图20160526182633.png

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>validate验证插件简单demo</title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Content/validate/jquery.validate.min.js"></script><!--引入验证插件-->
    <script src="Content/validate/messages_zh.min.js"></script><!--引入验证插件的中文信息库-->
</head>
<body>

    <form  action="/chuli.ashx" method="post" id="myForm">
        学号；<input type="number" name="stuID" value="" /><br />
        用户名；<input type="text" name="name" value="" /><br />
        邮箱；<input type="email" name="email" value="" /><br />
        密码；<input type="password" name="password" id="password" value="" /><br />
        确认密码；<input type="password" name="password1" value="" /><br />
        <button type="submit">提交</button>
    </form>
         
    <script>   
   
        $(function () {
            $('#myForm').validate({
                rules: {                  //validate配置项的配置规则
                    stuID:{
                            required: true,
                            minlength: 10,
                            maxlength: 10
                    },
                    name:{
                        required:true,
                        maxlength:5
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    password1: {
                        required: true,
                        minlength: 6,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    }
                  
                },
                messages: {                 //自定义配置提示信息干掉默认的提示信息
                    stuID:{
                        required: "请输入您的学号",
                        minlength:  "不能少于10个数",
                        maxlength:  "不能大于10个数"
                    },
                    name: {
                        required: "请输入您的用户名",
                        minlength: "用户名不得超过5字符"
                    },
                    password: {
                        required:  "请输入您的密码",
                        minlength: "密码必须6个字符以上"
                    },
                    password1: {
                        required: "请再次输入密码",
                        minlength:  "密码必须6个字符以上",
                        equalTo: "两次输入的密码不一致"
                    },
                    email: {
                        required: "请你的邮箱",
                        email: "邮箱不对，请核对",
                    }

                }
               

            });
        })
  
        $.validator.setDefaults({
            submitHandler: function (form) {      //配置validate默认项的的验证成功后的回调函数
                form.submit();//普通请求
                //异步请求 
                //$.post('/chuli.ashx', $("#myForm").serialize(), function (data) {
                //    alert(data);
                //})
            }
        });
    </script>
</body>
</html>

深入了解--中文API传送门：http://www.runoob.com/jquery/jquery-plugin-validate.html

简单demo：

MyValidateDemo.zip