通过jquery.validate.js校验表单字段是否合法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>蓝源Eloan-P2P平台->用户注册</title>
<link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/core.css" type="text/css" />
<script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript" src="/js/plugins/jquery-validation/localization/messages_zh.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script> <style type="text/css">
.el-register-form{
width:600px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
}
.el-register-form .form-control{
width: 220px;
display: inline;
}
</style>
<script type="text/javascript">
$(function(){
//第一种Ajax提交表单的方式
//$("#registerForm").ajaxForm();
//执行流程:1,点击表单的提交按钮,2,触发jQuery-validate的验证;
//3,验证成功,jquery-validate会自动提交表单;(因为这个时候表单已经是Ajax表单了,所以表单的提交通过Ajax提交) //自定义jquery-validate验证方法
$.validator.addMethod("checkUsername", function(value, element) {
//这个验证方法返回一个boolean值来代表验证是否通过
var ret=false;
$.ajax({
dataType:"json",
type:"post",
async:false,
url:"/checkUsername.do",
data:{
username:value
},
success:function(data){
ret = data.success;
}
});
return ret;
}, "用户名已经存在!"); $("#registerForm").validate({
rules:{
username:{
required:true,
rangelength:[4,16],
checkUsername:true
},
password:{
required:true,
rangelength:[4,16]
},
confirmPwd:{
equalTo:"#password"
}
},
messages:{
username:{
required:"请输入用户名",
rangelength:"用户名长度为{0}到{1}",
remote:"用户名已经存在"
},
password:{
required:"请输入密码",
rangelength:"密码长度为{0}到{1}"
},
confirmPwd:{
equalTo:"两次输入密码不一致"
}
},
//修改错误提示文字的样式
errorClass:"text-danger",
//处理错误高亮
highlight:function(element,errorClass){
//寻找离自己最近的div
$(element).closest(".form-group").addClass("has-error");
},
//取消错误高亮
unhighlight:function(element,errorClass){
$(element).closest(".form-group").removeClass("has-error");
},
//在表单验证成功之后提交表单做的事情
//第二种Ajax提交表单方式:
//1,点击表单中的提交按钮,2,jquery-valiate执行验证通过;因为这个时候我们配置了submitHandler,所以,当验证成功之后;
//jquery-validate不会自动提交表单,来执行submitHandler,3,在submitHandler中直接使用ajaxSubmit来完成表单提交;
submitHandler:function(form){
$(form).ajaxSubmit({
dataType:"json",
success:function(data){
if(data.success){
$.messager.confirm("提示","注册成功,点击确认进入登录",function(){
window.location.href="/login.html";
});
}else{
$.messager.popup("注册失败,"+data.msg);
}
}
});
}
});
})
</script>
</head>
<body>
<!-- 网页头信息 -->
<div class="el-header" >
<div class="container" style="position: relative;">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">首页</a></li>
<li><a href="/login.html">登录</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
</div> <!-- 网页导航 -->
<div class="navbar navbar-default el-navbar">
<div class="container">
<div class="navbar-header">
<a href=""><img alt="Brand" src="/images/logo.png"></a>
<span class="el-page-title">用户注册</span>
</div>
</div>
</div> <!-- 网页内容 -->
<div class="container">
<form id="registerForm" class="form-horizontal el-register-form" action="/register.do" method="post" >
<p class="h4" style="margin: 10px 10px 20px;color:#999;">请填写注册信息，点击“提交注册”即可完成注册！</p>
<div class="form-group">
<label class="control-label col-sm-2">用户名</label>
<div class="col-sm-10">
<input type="text" autocomplete="off" name="username" class="form-control" id="username"/>
<p class="help-block">用户名为4~16位字母，数字，符号或中文</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">密 码</label>
<div class="col-sm-10">
<input type="password" autocomplete="off" name="password" id="password" class="form-control" />
<p class="help-block">密码为4~16位字符组成,采用数字、字母、符号安全性更高</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">确认密码</label>
<div class="col-sm-10">
<input type="password" autocomplete="off" name="confirmPwd" class="form-control" />
<p class="help-block">请再次填写密码</p>
</div>
</div>
<div class="form-gorup">
<div class="col-sm-offset-2">
<button type="submit" class="btn btn-success">
同意协议并注册
</button>
  
<a href="/login.html" class="text-primary">已有账号，马上登录</a> <p style="padding-left: 50px;margin-top: 15px;">
<a href="#">《使用协议说明书》</a>
</p>
</div>
</div>
</form>
</div>
<!-- 网页版权 -->
<div class="container-foot-2">
<div class="context">
<div class="left">
<p>专注于高级Java开发工程师的培养</p>
<p>版权所有： 2015广州小码哥教育科技有限公司</p>
<p>地  址： 广州市天河区棠下荷光三横路盛达商务园D座5楼</p>
<p>电  话： 020-29007520  
邮箱： service@520it.com</p>
<p>
<a href="http://www.miitbeian.gov.cn" style="color: #ffffff">ICP备案
：粤ICP备字1504547</a>
</p>
<p>
<a href="http://www.gzjd.gov.cn/wlaqjc/open/validateSite.do" style="color: #ffffff">穗公网安备：44010650010086</a>
</p>
</div>
<div class="right">
<a target="_blank" href="http://weibo.com/ITxiaomage"><img
src="/images/sina.png"></a>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
通过jquery.validate.js校验表单字段是否合法的更多相关文章
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...
- jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- jquery.validate.js自定义表单验证
$(document).ready(function() { //在下列位置输入页面加载的逻辑代码 $("#inputForm").validate({ rules: { seq: ...
- Django 表单校验 表单字段设置 自定义表单校验规则
今天看到了一篇非常好的博文,拿来和大家分享一下. 内容包括了: 用户注册时输入数据的校验 使用widget进行字段设置 实现自定义的校验规则 参考自下面的这篇文章
- 使用jquery.validate.js实现boostrap3的校验和验证
使用jquery.validate.js实现boostrap3的校验和验证 boostrap3验证框架 jquery.validate.js校验表单 >>>>>>& ...
- jquery.validate.js默认配置，jquery.validate.js自定义提示信息
jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- 【转】jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
随机推荐
- React-native APK打包
安卓相关工具配置到环境变量,这样可以将安卓相关工具可以直接在cmd命令中调用 1 检查gradle版本 查看里面对应的编译工具版本号,如果提示版本不对你,那么直接去更新android sdk,相关的s ...
- JMS学习一(JMS介绍)
一.JMS是个什么鬼 1.百度百科解释:JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之 ...
- IIS部署时failed to execute url 解决方法
web.config中增加如下节点: <system.webServer> <validation validateIntegratedModeConfiguration=&quo ...
- asp.net mvc4+EF 下使用UEditor
一.从官方网站下载UEditor,http://ueditor.baidu.com/website/download.html, 我下载的是1.53.net版本
- hihocoder 1828 Saving Tang Monk II (DP+BFS)
题目链接 Problem Description <Journey to the West>(also <Monkey>) is one of the Four Great C ...
- 【bzoj4011】[HNOI2015]落忆枫音 容斥原理+拓扑排序+dp
题目描述 给你一张 $n$ 个点 $m$ 条边的DAG,$1$ 号节点没有入边.再向这个DAG中加入边 $x\to y$ ,求形成的新图中以 $1$ 为根的外向树形图数目模 $10^9+7$ . 输入 ...
- Android四大组件之Intent(续)
- QoS专题-第1期-QoS理论篇
QoS理论篇 1 QoS的产生 随着网络技术的飞速发展,IP网络已经从当初的单一数据网络向集成数据.语音.视频.游戏的多业务网络转变.网络中所承载的数据呈几何级倍数增长,而且这些业务对网络带 ...
- Guardian of Decency UVALive - 3415（最大独立集板题）
老师在选择一些学生做活动时,为避免学生发生暧昧关系,就提出了四个要求.在他眼中,只要任意两个人符合这四个要求之一,就不可能发生暧昧.现在给出n个学生关于这四个要求的信息,求老师可以挑选出的最大学生数量 ...
- Ants UVA - 1411（km板题竟然让我换了个板子）
题意: 给出n个白点和n个黑点的坐标,要求用n条不相交的线段把它们连接起来,其中每条线段恰好连接一个白点和一个黑点,每个点恰好连接到一条线段 解析: 带入负的欧几里得距离求就好了 假设a1-b1 与 ...