Jquery客户端校验——jquery.validate.js
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的更多相关文章
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...
- 通过jquery.validate.js校验表单字段是否合法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- jQuery插件之验证控件jquery.validate.js
今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...
- 【转】jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- [转]jquery.validate.js表单验证
原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jquery.validate.js插件使用
jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...
随机推荐
- jmeter解决不同线程组之间传递参数问题
首先在第一个线程组里讲你需要保存的值放入到jmeter的某个属性中,属性名名字自己定义,如上图的token , props.put("token", token),第二个参数必须是 ...
- webgl画个点
function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(c ...
- Anna-senpai帖子翻译与Mirai源代码使用
Anna-senpai这个人太好玩了,整件事就像没有黄段子的无聊世界那样. 无聊翻译了一下,顺便实验了效果. --------------------------------------------- ...
- IDEA 中生成 Hibernate 逆向工程实践
谈起 Hibernate 应该得知道 Gavin King 大叔,他构建了 Hibernate ,并将其捐献给了开源社区. Hibernate 对象关系映射解决方案,为面向对象的领域模型到传统的关系型 ...
- 踢出非法Linux用户
非法添加用户及非法进去的远程操作用户! 01.非法用户闯入系统 最简单的办法就是用 w 命令来检查. 如果确认有非法用户出现在系统内,可以立即 kill 用户相关进程. kill -9 `lsof ...
- 【WPF】整个自定义按钮后台添加
- mysql的explain学习
explain是用来获取sql执行计划的信息. 上面是一个最简单的sql分析.下面来分析每列的意思. ①id ②select_type ③ table ④type ⑤possible_key ⑥ke ...
- 提高前端开发效率必备AngularJS (基础)
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- acm结束了
最后一场比赛打完了.之前为了记录一些题目,开了这个博客,现在结束了acm,这个博客之后也不再更新了. 大家继续加油!
- consolel API大全-附测试结果
f 简介: JS中默认没有console对象, 这是某些浏览器提供的浏览器内置对象, 低版本IE就没有, 其他主流浏览器应该都有.它能看到结构话的东西,如果是alert,淡出一个对象就是[object ...