jquery动态修改radio值

一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassistance.de/api-browser/plugins.html

官方文档：http://docs.jquery.com/Plugins/Validation/Methods

 

二、引入js文件

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>

三、编写验证js

$(function () {
    $(document.forms[0]).validate({
        rules: {
            UserName: { required: true, minlength: 6, maxlength: 12 },
            Password: { required: true, minlength: 5, maxlength: 12 }
        },
        messages: {
            "UserName": {
                required: "用户名不能为空.",
                minlength: "最少6位",
                maxlength:"最多12位"
            },
            "Password": {
                required:"密码不能为空."
            }
        }
    });
})

 

四、默认校验规则

(1)required:true               必输字段
 (2)remote:"check.php"          使用ajax方法调用check.php验证输入值（下面详细说明）
 (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

remote：URL
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项

remote: "check-email.php"
 remote: {
     url: "check-email.php",     //后台处理程序
     type: "post",               //数据发送方式
     dataType: "json",           //接受数据格式    
     data: {                     //要传递的数据
         username: function() {
             return $("#username").val();
         }
     }
 }

远程地址只能输出 "true" 或 "false"，不能有其它输出

 

五、默认的提示

messages: {
     required:"This field is required.",
     remote:"Please fix this field.",
     email:"Please enter a valid email address.",
     url: "Pleaseenter a valid URL.",
     date:"Please enter a valid date.",
     dateISO:"Please enter a valid date (ISO).",
    眉ltiges Datum ein.",
     number:"Please enter a valid number.",
     numberDE:"Bitte geben Sie eine Nummer ein.",
     digits:"Please enter only digits",
     creditcard:"Please enter a valid credit card number.",
     equalTo:"Please enter the same value again.",
     accept:"Please enter a value with a valid extension.",
     maxlength:$.validator.format("Please enter no more than {0}characters."),
     minlength:$.validator.format("Please enter at least {0} characters."),
     rangelength:$.validator.format("Please enter a value between {0} and {1}characters long."),
     range:$.validator.format("Please enter a value between {0} and{1}."),
     max:$.validator.format("Please enter a value less than or equal to{0}."),
     min:$.validator.format("Please enter a value greater than or equal to{0}.")
 }

如需要修改提示消息，可在js代码中加入：

jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
   remote:"请修正该字段",
   email:"请输入正确格式的电子邮件",
   url:"请输入合法的网址",
   date:"请输入合法的日期",
   dateISO: "请输入合法的日期(ISO).",
   number:"请输入合法的数字",
   digits:"只能输入整数",
   creditcard:"请输入合法的信用卡号",
   equalTo:"请再次输入相同的值",
   accept:"请输入拥有合法后缀名的字符串",
   maxlength:jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
   minlength:jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
   range:jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
   max:jQuery.validator.format("请输入一个最大为{0} 的值"),
   min:jQuery.validator.format("请输入一个最小为{0} 的值")
 });

推荐做法，将此文件放入messages_cn.js中，在页面中引入

<script src="../js/messages_cn.js"type="text/javascript"></script>

六、实例：

test.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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 runat="server">
<title>JQuery表单验证插件jQuery.validate.js</title>
<style type="text/css">
/******/
form.cmxform label.error, label.error {
color: red;
font-style: italic;
}
</style>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" >
$.validator.setDefaults({
        submitHandler: function() {
                alert("已经提交!");
        }
});

$().ready(function() {
        $("#commentForm").validate({
                rules: {
                    username: {
                            required:true,
                            minlength:2
                    },
                    email: {
                            required: true,
                            email: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    confirm_password: {
                        required: true,
                        minlength: 6,
                        equalTo: "#password"
                    }
                },
                messages: {
                    username: {
                            required:"用户名必填",
                            minlength:"至少2个字符"
                    },
                    email:"请输入一个邮件地址",
                    password: {
                        required: "请输入密码",
                        minlength: "密码不能少于6个字符"
                    },
                    confirm_password: {
                        required: "请输入确认密码",
                        minlength: "确认密码不能少于6个字符",
                        equalTo: "密码输入不一致"
                    }
                }
        });

});
</script>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>注册账号</legend>
<p>
<label for="cusername">用户名</label>
<input id="username" name="username" />
<p>
<label for="cemail">邮箱</label>
<input id="email" name="email" />
</p>
<p>
<label for="cpassword">密码</label>
<input type="password" id="password" name="password" value="" />
</p>
<p>
<label for="cconfirm_password">确认密码</label>
<input type="password" id="confirm_password" name="confirm_password" value="" />
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>