jquery自写的一个验证机制 - 黑马程序员技术交流社区

@{
ViewBag.Title = "Login";
Layout = "~/Views/Login/_Layout.cshtml";
}
@model LoginModel
@section BodyScript{
<script src="http://image.baiboom.com/js/jquery.validate.js" type="text/javascript"></script>
}
@section HeadStyle{
}
<div class="login_main">
<div class="row-fluid">
<div class="span12">
<form action="@Request.Url.ToString()" id="loginForm" method="post">
<div>
@if (ViewData["SuccessMsg"] == null)
{
@Html.ValidationSummary(false, null, new { @class = "alert alert-error" })
}
else
{
<div class="alert alert-info">
<h4 class="alert-heading">@ViewData["SuccessMsg"]</h4>
</div>
}
@Html.AntiForgeryToken()
</div>
<div>
<input class="span12" id="loginName" name="loginName" placeholder="邮箱/手机号码/百步ID"
type="text" value="@Model.loginName" />
<div class="help-block">
<span data-valmsg-for="loginName"></span>
</div>
</div>
<div>
<input class="span12" id="password" name="password" placeholder="密码" type="password" />
<div class="help-block">
<span class="field-validation-valid" data-valmsg-for="password"></span>
</div>
</div>
<div>
<label class="checkbox inline" id="labRememberMe">
<input onclick="this.value=this.checked" name="rememberMe" type="checkbox" />一周内自动登录
</label>
</div>
<div>
<input type="submit" value="立即登录" class="btn btn-success btn-tremendous" />
<label class="checkbox inline">
<a href="/account/ForgetPwd">忘记密码？</a>
</label>
</div>
</form>
</div>
</div>
<span>用其他帐户登录：<a class="btn btn-mini">QQ</a> <a class="btn btn-mini">新浪微博</a></span>
</div>
@section Script{
<script type="text/javascript">
$(function () {
jQuery.validator.addMethod("regex", function (value, element, param) {
var tel = new RegExp(param);
return (tel.test(value));
}, $.validator.format("验证Regex{0}!"));
// jQuery.validator.addMethod("customLoginName", function (value, element, param) {
// var re = new RegExp("(^1[3|4|5|8]\d{9}$)|(^[1-9][0-9]{6,9}$)");
// return re.test(value);
// }, $.validator.format("自定义验证{0}!"));
$("#loginName").tooltip({ title: "[用户名]必须为（邮箱、手机号码或百步ID）", delay: { show: 0, hide: 200} });
$("#password").tooltip({ title: "[密码]只能输入6~22数字或字母或特殊字符(~!@@#$%^&*.)", delay: { show: 0, hide: 200} });
$("#labRememberMe").tooltip({ title: "记住密码7天" });
$("#loginForm").validate({
onkeyup: false,
rules: {
loginName: {
required: true,
regex: "(^1[3|4|5|8]{1}[0-9]{9}$)|(^[1-9][0-9]{6,9}$)|(([.a-zA-Z0-9_-]){2,10}@@([a-zA-Z0-9_-]){2,10}(.([a-zA-Z0-9]){2,}){1,4})"
},
password: {
required: true,
regex: "^[0-9a-zA-Z~!@@#$%^&*.]{6,22}[ DISCUZ_CODE_0 ]quot;
}
},
messages: {
loginName: {
required: "请输入用户名",
regex: "[用户账号]格式不正确"
},
password: {
required: "请输入密码",
regex: "[密码]只能输入6~22数字或字母或特殊字符(~!@@#$%^&*.)"
}
},
errorClass: "validation-error",
errorElement: "span",
errorPlacement: function (error, element) {
var p = $(element).parent().find('[data-valmsg-for="' + $(element).attr("name") + '"]:eq(0)');
error.appendTo(p);
},
validClass: "validation-success",
successClass: "validation-success",
success: function (success, element) {
var a = $(element);
var name = a.attr("name");
var p = a.parent().find('[data-valmsg-for="' + name + '"]:eq(0)');
success.html("验证通过");
success.addClass("validation-error validation-success");
success.appendTo(p);
}
});
});
</script>
}

复制代码