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. python_接口开发

    一.GET和POST请求from flask import Flask,jsonifydata = { 'name':'Jerry', 'sex':'男', 'age':'18'}app = Flas ...

  2. [LeetCode] Assign Cookies 分点心

    Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...

  3. 请求如何进入ASP.NET MVC框架

    一.前言 对于WebForm开发,请求通常是一个以.aspx结尾的url,对应一个物理文件,从代码的角度来说它其实是一个控件(Page).而在MVC中,一个请求对应的是一个Controller里的Ac ...

  4. Oracle 表和表数据恢复

    1. 表恢复 对误删的表,只要没有使用 purge 永久删除选项,那么基本上是能从 flashback table 区恢复回来的. 数据表和其中的数据都是可以恢复回来的,记得 flashback ta ...

  5. 单点登录改进版-使用ajax分发cookie避免重定向轮询

    前言 继上一篇博文:可跨域的单点登录(SSO)实现方案[附.net代码]虽然实现了单点登录,也存在很多不合理的地方.很多热心的朋友也给出了很多指导性的意见,特别是 LoveCoder提出的意见. 在很 ...

  6. eclipse直接访问数据库

    本文转载至百度经验 http://jingyan.baidu.com/article/a501d80cea3ed4ec630f5e2f.html 以oracle 11g 数据库为例

  7. vue.js第七课

    条件渲染 v-if template v-if v-show v-else v-if 与 v-show   handlebars.js 1.v-if 如果我们想一次 控制 多个元素呢? 我们可以吧一个 ...

  8. xss篇-本着就了解安全本质的想法，尽可能的用通俗易懂的语言去解释安全漏洞问题

    前言 最早接触安全也是从xss攻击和sql注入攻击开始的. 0x01    跨站脚本攻击漏洞(XSS),是客户端脚本安全中的头号大敌,owasp top10 屡居榜首,由于攻击手法较多,开发者水平不一 ...

  9. consolel API大全-附测试结果

    f 简介: JS中默认没有console对象, 这是某些浏览器提供的浏览器内置对象, 低版本IE就没有, 其他主流浏览器应该都有.它能看到结构话的东西,如果是alert,淡出一个对象就是[object ...

  10. Android测试基础题(三)

    今天接着给大家带来的是Android测试基础题(三).    需求:定义一个排序的方法,根据用户传入的double类型数组进行排序,并返回排序后的数组 俗话说的好:温故而知新,可以为师矣 packag ...