码迷,mamicode.com
首页 > Web开发 > 详细

Jquery客户端校验——jquery.validate.js

时间:2016-04-27 17:01:26      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。使用方法如下

1.引用JS库

<script src="../Script/jquery.js" type="text/javascript"></script>
<script src="../Script/jquery.validate.js" type="text/javascript"></script>

2.校验规则:

技术分享

3.  .NET MVC Demo应用案例:

<body class="page-body login-page">

<script type="text/javascript">
jQuery(document).ready(function ($) {
$("form#login").validate({
rules: {
  username: {
          required: true,

          maxlength:5
        },

    password: {
            required: true,

            maxlength:6
          }
    },

    messages: {
      username: {
              required: ‘Please enter your username.‘

              maxlength:$.validator.format( "Please enter no more than {0} characters." ),

          },

    password: {
              required: ‘Please enter your password.‘
          }
      },
    });
  });
</script>

@using (Html.BeginForm("Index", "Home", FormMethod.Post,new {@id="login", @class = "login-form fade-in-effect" }))
{

<p>Dear user, log in to access the admin area!</p>

<div class="form-group">
<label class="control-label" for="username">Username</label>
<input type="text" class="form-control input-dark" name="username" id="username" autocomplete="off" />
</div>

<div class="form-group">
<label class="control-label" for="passwd">Password</label>
<input type="password" class="form-control input-dark" name="password" id="passwd" autocomplete="off" />
</div>
<div class="btn-white">
<p>
@Html.ValidationMessage("username")
@Html.ValidationMessage("password")
</p>
</div>
<div class="form-group">
<button type="submit" class="btn btn-white btn-block">
<i class="fa-lock"></i>
Log In
</button>
</div>
<div class="login-footer text-right">
<a href="#">忘记密码</a>
<a href="#">点击注册</a>
</div>

}
<!-- External login -->
<div class="external-login">
</div>

</div>

</div>

</div>

Jquery客户端校验——jquery.validate.js

标签:

原文地址:http://www.cnblogs.com/niguang/p/5439361.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!