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的更多相关文章

  1. jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案

    jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...

  2. 通过jquery.validate.js校验表单字段是否合法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  4. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

  5. 【转】jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  6. [转]jquery.validate.js表单验证

    原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...

  7. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  8. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  9. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...

随机推荐

  1. canvas arcTo()用法详解

    CanvasRenderingContext2D对象的方法arcTo()的用法. arcTo(x1, y1, x2, y2, radius) arcTo()方法将利用当前端点.端点1(x1,y1)和端 ...

  2. MikroTik RB750r2 操作记录

    1. 客户端的下载 http://www.mikrotik.com/download  下载 winbox 2. Reset重置密码的正确姿势 http://wiki.mikrotik.com/ind ...

  3. pcl曲面重建模块-poisson重建算法示例

    poisson曲面重建算法 pcl-1.8测试通过 #include <iostream> #include <pcl/common/common.h> #include &l ...

  4. Linux 共享内存详解一

    共享内存段被多个进程附加的时候,如果不是所有进程都已经调用shmdt,那么删除该共享内存段时,会出现一个临时的不完整的共享内存段(key值是0),无法彻底删除.只有当所有进程都调用shmdt,这个临时 ...

  5. shiro-简介

    简介: Apache Shiro 是Java的一个安全(权限)框架. Shiro可以非常容易的开发出足够好的应用,其不仅可以用在JavaSE环境,也可以用在JavaEE环境. Shiro可以完成:认证 ...

  6. Android组件化和插件化开发

    http://www.cnblogs.com/android-blogs/p/5703355.html 什么是组件化和插件化? 组件化开发就是将一个app分成多个模块,每个模块都是一个组件(Modul ...

  7. asp.net mvc 权限过滤和单点登录（禁止重复登录）

    1.权限控制使用controller和 action来实现,权限方式有很多种,最近开发项目使用控制控制器方式实现代码如下 /// <summary> /// 用户权限控制 /// < ...

  8. DevExpress.chartControt画趋势图

    private void DrawLine(DataTable dt) { Myalysis.Series.Clear(); //图标位置 Myalysis.Legend.AlignmentHoriz ...

  9. 封装js的部分兼容性

    //获取标签的内容(兼容所有浏览器)function getInnerText(element) { //能力检测(先判断如果这个能力有这个) if(typeof element.innerText ...

  10. BZOJ 2001: [Hnoi2010]City 城市建设

    2001: [Hnoi2010]City 城市建设 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 1132  Solved: 555[Submit][ ...