Jquery.Validation表单验证

官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
在线文档：http://docs.jquery.com/Plugins/Validation
在线 APIhttp://jquery.bassistance.de/api-browser/plugins.html
项目介绍：http://plugins.jquery.com/project/validate

function isDigit(s)  {   
    var patrn=/^\d+$/;   
    if (!patrn.exec(s)) return false   
    return true

(1)required:true 必输字段
(2)remote:"check.shtml" 使用ajax方法调用check.shtml验证输入值
(3)email:true 必须输入正确格式的电子邮件(只能验证格式,不保证有效性)
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

国际化,在页面中引入messages_zh.js即可,当然也可以添加需要的验证规则

DOM验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-validation-1.10.0/lib/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="jquery-validation-1.10.0/lib/jquery.form.js" type="text/javascript"></script>
    <script src="jquery-validation-1.10.0/dist/jquery.validate.js" type="text/javascript"></script>
    <script src="jquery-validation-1.10.0/localization/messages_zh.js" type="text/javascript"></script>
    <script src="jquery-validation-1.10.0/lib/jquery.metadata.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#register").validate();
         });
    </script>
</head>
<body>
    <form id="register" action="">
    <table>
        <tr>
            <td>
                <label for="username">
                    用户名：</label>
            </td>
            <td>
                <input type="text" name="username" id="username" class="{required:true,minlength:5}">
            </td>
        </tr>
        <tr>
            <td>
                <label for="password">
                    密码：</label>
            </td>
            <td>
                <input type="password" name="password" id="password" class="{minlength:6}">
            </td>
        </tr>
        <tr>
            <td>
                <label for="repassword">
                    密码确认：</label>
            </td>
            <td>
                <input type="password" name="repassword" id="repassword" class="{required:true,equalTo:'#password'}" >
            </td>
        </tr>
        <tr>
            <td>
                <label for="_basketball">
                    爱好：</label>
            </td>
            <td>
                <label>
                    <input type="checkbox" value="basketball" name="hobby" id="_basketball">basketball</label>
                <label>
                    <input type="checkbox" value="football" name="hobby" id="_football">football</label>
                <label>
                    <input type="checkbox" value="skating" name="hobby" id="_skating">skating</label>
                <label>
                    <input type="checkbox" value="dance" name="hobby" id="_dance">dance</label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="_boy">
                    性别：</label>
            </td>
            <td>
                <label>
                    <input type="radio" value="boy" name="sex" id="_boy">boy</label>
                <label>
                    <input type="radio" value="girl" name="sex">girl</label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="birthday">
                    出生日期：</label>
            </td>
            <td>
                <input id="birthday" name="birthday" type="text" class="required date">
            </td>
        </tr>
        <tr>
            <td>
                <label for="email">
                    邮箱：</label>
            </td>
            <td>
                <input type="text" name="email" id="email" class="required email">
            </td>
        </tr>
        <tr>
            <td>
                <label for="address">
                    住址：</label>
            </td>
            <td>
                <input type="text" name="address" id="address" >
            </td>
        </tr>
    </table>
    <input type="submit" value="submit">
    </form>
</body>
</html>

View Code