<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Css/css.css" rel="stylesheet" />
<script src="~/Js/jquery.min.js"></script>
<script src="~/Js/jquery.validate.min.js"></script>
<script src="~/Js/jquery.validate.extend.js"></script>
<script>
$(document).ready(function () {
$("#myform").validate({
rules: {
username: { required: true, minlength: 2 },
password: { required: true, minlength: 6, maxlength: 16 },
repassword: { required: true, equalTo: "#password" },
amt: { required: true, isAmount: true },
idcard: { required: true, isIdCardNo: true }
},
messages: {
username: {
required: "用户名不能为空",
minlength: "用户名的最小长度为2"
},
password: {
required: "密码不能为空",
minlength: "密码长度不能少于6个字符",
maxlength: "密码长度不能超过16个字符"
},
repassword: {
required: "确认密码不能为空",
equalTo: "确认密码和密码不一致"
},
amt: {
required: "金额不能为空",
isAmount: "交易金额必须大于0,且最多有两位小数"
},
idcard: {
required: "身份证不能为空",
isIdCardNo: "身份证号码错误"
}
}
});
});
</script>
</head>
<body>
<div>
<form id="myform" method="post" action="">
<fieldset>
<legend>jquery-validate表单校验验证</legend>
<div class="item">
<label for="username" class="item-label">用户名:</label>
<input type="text" id="username" name="username" class="item-text" placeholder="设置用户名">
</div>
<div class="item">
<label for="password" class="item-label">密码:</label>
<input type="password" id="password" name="password" class="item-text" placeholder="设置密码">
</div>
<div class="item">
<label for="password" class="item-label">确认密码:</label>
扩展jquery.validate自定义验证,自定义提示,本地化
最新推荐文章于 2024-09-14 16:44:21 发布
本文详细介绍了如何在jQuery.validate插件中扩展自定义验证规则,并实现个性化错误提示及本地化设置,帮助开发者提升表单验证的灵活性和用户体验。
摘要由CSDN通过智能技术生成