您的位置：首页 > Web前端 > JQuery

jquery 验证

2016-04-29 11:25 531 查看

引入JS

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>

加载自定义验证

<script>
$(document).ready(function () {
$("#formid").validate({
rules: {
username: { required: true, minlength: 8 },
price: { required: true, digits: true }
},
messages: {
username: { required: "必须填写", minlength: "最少8个字符" },
price: { required: "必须填写", digits: "必须填写整数" }
},　　　　　　　　　　
errorElement: "em",
success: function (label) {
label.text("OK").addClass('success')
}
});
});

</script>

完整页面代码:


<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Rep</title>
<style>
em.error {
background-color:blue;
background: url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}

em.success {
background-color:red;
background: url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}

</style>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>

<script>
$(document).ready(function () {
$("#formid").validate({
rules: {
username: { required: true, minlength: 8 },
price: { required: true, digits: true }
},
messages: {
username: { required: "必须填写", minlength: "最少8个字符" },
price: { required: "必须填写", digits: "必须填写整数" }
},
errorElement: "em",
success: function (label) {
label.text("OK").addClass('success')
}
});
});

</script>
</head>
<body>
<form id="formid">
<input id="username" name="username" size="25" value="" />
<input id="price" name="price" size="25" value="" />

<input id="Submit1" type="submit" class="submit" value="submit" />

</form>
</body>
</html>

设置的规格

序号     规则     描述
1     required:true     必须输入的字段。
2     remote:"check.php"     使用 ajax 方法调用 check.php 验证输入值。
3     email:true     必须输入正确格式的电子邮件。
4     url:true     必须输入正确格式的网址。
5     date:true     必须输入正确格式的日期。日期校验 ie6 出错，慎用。
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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航