HTML5中custom data-*特性与asp.net mvc 3 表单验证
前面一篇文章我们介绍了HTML5中custom data-*特性http://www.zzzyk.com/kf/201204/127525.html，在Asp.net MVC Web App中原来我们对表单有验证，需要写这个js与Jquery Validation 插件配合, 回顾一下，看下面的代码:
<!DOCTYPE html>
<html>
<head>
<title>LoginWithModel</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.pack.js"
type="text/javascript"></script>
</head>
<body>
<form action="/Security/LoginWithModel" method="post"> <table>
<tr>
<td>
<label for="UserName">User name</label>
</td>
<td>
<input id="UserName" name="UserName" type="text" value="" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email address</label>
</td>
<td>
<input id="Email" name="Email" type="text" value="" />
</td>
</tr>
<tr>
<td>
<label for="Password">Password</label>
</td>
<td>
<input id="Password" name="Password" type="password" />
</td>
</tr>
<tr>
<td>
<label for="ConfirmPassword">Confirm password</label>
</td>
<td>
<input id="ConfirmPassword" name="ConfirmPassword" type="password" />
</td>
</tr>
</table>
<input type="submit" value="Submit" />
</form> <script src="../../Scripts/MyformValidatation.js" type="text/javascript"></script>
</body>
</html>
JS 通常像这样:
$(document).ready(function () {
$.validator.addMethod('Email', function (value) {
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
}, 'Please enter correct email.');
$("form").validate({
rules: {
UserName: { required: true },
Email: { required: true, Email: true },
Password: { required: true, range: [6, 12] },
ConfirmPassword: { required: true, equalTo: "#Password" }
}
, messages: {
UserName: { required: "Please enter UserName" },
Email: { required: "Please enter Email", Email: "Please enter corret email" },
Password: { required: "Please enter Password", range: "must be at least 6 characters long." },
ConfirmPassword: { required: "Please enter confirm password." }
}
, wrapper: "p",
errorPlacement: function (error, element) {
if (error !
补充：web前端 , HTML 5 ,
