zoukankan      html  css  js  c++  java
  • 转载 jQuery validation

    之前做客户端验证感觉自己javascript 不行,虽然能写出来一完整的验证,但从不自信,一直觉得客户端验证是比较繁琐的事情,但是又不能不做,只到最开始接触ajax ,遇到了一个jQuery validation 的插件,在网上看功能比较强大,而且看起来比较容易,所以就尝试一下,效果还真不错!

    jQuery validation 插件提供的一些DEMO.在这些DEMO 都是一些比较常用而且很好的例子:中间


    $.validator.setDefaults({
    debug: true
    });
    设置默认的状态为debug,这样用户的数据就不会提交了。

    接下来是一段比较长的代码,但是不用怕,因为真的挺简单的//当页面载入完成时,执行以下动作
    $().ready(function() {

    //验证指定表单
    $("#myform").validate({
    //设置默认的状态为keyup,也可以设置为blur
    event: "keyup",     //触发验证的事件
    //设定规则
    rules: {
    //对应id为'username'的input
    username: {
    //必填项
    required: true,
    //最多和最少的字符数
    rangeLength:[4,16]
    },
    mail: {
    required: true,
    //声明这是一个电子邮件
    email: true
    },
    password: {
    required: true,
    //最少4个字符
    minLength: 4
    },
    confirm_password: {
    required: true,
    minLength: 4,
    // 与哪个等同,这里是id为password的input等同
    equalTo: "#password"
    },
    agree: "required"

    },

    //这里是与规则对应的错误代码
    messages: {
    username: {
    //如果用户名为空,则显示下面的信息
    required: '请输入用户名',
    //如果字符串的长度不符合,则显示下面的信息
    rangeLength: '用户名必须在4-16个字符之间'
    },
    password: {
    required: '请输入密码',
    minLength: '密码必须大于4个字符'
    },
    confirm_password: {
    required: '请确认你的密码',
    equalTo: '两次密码输入不一致',
    minLength: '密码必须大于4个字符'
    },
    agree: '请同意我们的条款',
    mail: '请输入有效的E-MAIL帐户'
    }
    });
    });

    下面是一个比较简单的例子:

    HTML 代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
            <title>jQuery验证</title> 

            <link rel="stylesheet" href="theme.css" type="text/css"/>
            <script src="jquery.js"   type="text/javascript"></script> 
            <script type="text/javascript" src="jquery.validate.js"></script>
            <script type="text/javascript" src="fv.js"></script> 
           
        </head> 
        <body> 
            <form class="cmxform" id="signupForm" method="get" action="">
        <fieldset>
            <legend>Validating a complete form</legend>
            <p>
                <label for="firstname">Firstname</label>
                <input id="firstname" name="firstname" />
            </p>
            <p>
                <label for="lastname">Lastname</label>
                <input id="lastname" name="lastname" />
            </p>
            <p>
                <label for="username">Username</label>
                <input id="username" name="username" />
            </p>
            <p>
                <label for="password">Password</label>
                <input id="password" name="password" type="password" />
            </p>
            <p>
                <label for="confirm_password">Confirm password</label>
                <input id="confirm_password" name="confirm_password" type="password" />
            </p>
            <p>
                <label for="email">Email</label>
                <input id="email" name="email" />
            </p>
            <p>
                <label for="agree">Please agree to our policy</label>
                <input type="checkbox" id="agree" name="agree" />
            </p>
            <p>
                <input class="submit" type="submit" value="Submit"/>
            </p>
        </fieldset>
    </form>
        </body> 
    </html>

    JS  代码也不是jquery validation 验证代码:

    //验证通过表单提交的方式
    $.validator.setDefaults({
        submitHandler: function() { alert("submitted!"); }
    });

    $().ready(function() {
        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {  //验证规则定义
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {    //验证错误信息配置
                firstname: "Please enter your firstname",
                lastname: "Please enter your lastname",
                username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                confirm_password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                },
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            }
        });
        /**
            验证确认密码通过后,更改密码时,验证确认密码的合法性
        **/
        $("#password").blur(function() {
            $("#confirm_password").valid();
        });

        success: function(label) {
            label.html('√').addClass("success");
        }
    });

    另外就是css 样式文件:

    #signupForm { 670px;}
    #signupForm label.error {
        margin-left: 10px;
        auto;
        display: inline;
    }
    #newsletter_topics label.error {
        display: none;
        margin-left: 103px;
    }
    body{
        font-size:16px;
        color:blue;
    }
    form.cmxform label.error, label.error {
        /* remove the next line when you have trouble in IE6 with labels in list */
        color: red;
        font-style: normal
    }
    div.error { display: none; }
    input {    border: 1px solid black; }
    input:focus { border: 1px dotted black; }
    input.error { border: 1px dotted red; }

    运行上面的程序需要jQuery.js jQuery 类库文件,以及 jQuery validation 插件的库文件 jquery.validation.js 文件.

  • 相关阅读:
    HDU 1501 Zipper(DFS)
    HDU 2181 哈密顿绕行世界问题(DFS)
    HDU 1254 推箱子(BFS)
    HDU 1045 Fire Net (DFS)
    HDU 2212 DFS
    HDU 1241Oil Deposits (DFS)
    HDU 1312 Red and Black (DFS)
    HDU 1010 Tempter of the Bone(DFS+奇偶剪枝)
    HDU 1022 Train Problem I(栈)
    HDU 1008 u Calculate e
  • 原文地址:https://www.cnblogs.com/sunrise/p/3593866.html
Copyright © 2011-2022 走看看