day32(表单校验js和jquery表单校验)
校验用户名、密码、密码一直性。
<style>
.error {
color: red
} .success {
color: green
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("#username").blur(function() {
//获取username值
var username_v = $("#username").val();
//去掉两端空格
username_v = $.trim(username_v);
//对值进行非空校验
if(username_v == "") {
//为空
$(this).next("span").text("用户名不能为空").removeClass().addClass("error");
} else {
alert(123);
//这则表达式进行中文校验
var username_reg = /[\u4e00-\u9fa5]/;
var flag = username_reg.test(username_v);
if(flag) {
//正则表达式校验正确(含有中文)
$(this).next("span").text("用户名不能含有中文").removeClass().addClass("error");
} else {
//用户名正确（查重）
$.post("${pageContext.request.contextPath }/UserCheckServlet", {
username: username_v
}, function(data) {
if(data == "true") {
$("#username").next("span").text("用户名已存在").removeClass().addClass("error");
} else {
$("#username").next("span").text("用户名可用").removeClass().addClass("success");
}
});
}
}
}); $("#password").blur(function(){
//获取文本框中信息
var password_v=$.trim($(this).val());
//判断文本框的信息（是否为空）
if(password_v==""){
$(this).next("span").text("密码不能为空").removeClass().addClass("error");
}else{
//判断密码强度是否符合
var password_reg=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
if(password_reg.test(password_v)){
$(this).next("span").text("密码合格").removeClass().addClass("success");
}else{
$(this).next("span").text("密码强度不够，密码必须由大小写字母、数字组成8-10位，不能包含中文和特殊字符！").removeClass().addClass("error");
}
}
}); $("#repassword").blur(function(){
//获取文本框中信息
var repassword_v=$.trim($(this).val());
//判断文本框的信息（是否为空）
if(repassword_v==""){
$(this).next("span").text("密码不能为空").removeClass().addClass("error");
}else{
//判断密码强度是否符合
var password_reg=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
if(password_reg.test(repassword_v)){
var password_v=$.trim($("#password").val());
if(repassword_v!=password_v){
$(this).next("span").text("密码不一致").removeClass().addClass("error");
}else{
$(this).next("span").text("密码合格").removeClass().addClass("success");
}
}else{
$(this).next("span").text("密码强度不够，密码必须由大小写字母、数字组成8-10位，不能包含中文和特殊字符！").removeClass().addClass("error");
}
}
});
})
</script>
使用jquery插件来进行表单校验
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
.error {
color: red;
}
</style>
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
<script src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
<script>
$(function() {
$("form")
.validate(
{
rules : {
username : {
required : true,
minlength : 6,
maxlength : 18,
username_reg : true,
remote : {
url : "${pageContext.request.contextPath}/UserCheckServlet", //后台处理程序
type : "post", //数据发送方式
data : { //要传递的数据
username : function() {
return $("#username").val();
}
}
}
},
password : {
required : true,
password_reg : true },
repassword : {
required : true,
password_reg : true,
equalTo: "#password" },
tel : {
required : true,
tel_reg : true
},
IDCard:{
required:true,
IDCard_reg:true
},
email:{
required:true,
email:true
} },
messages : {
username : {
required : "请输入用户名",
username_reg : "用户名不能为中文"
},
password : {
required : "密码不能为空",
password_reg : "密码必须是大小写和数字的组合,长度8-10位"
},
repassword : {
required : "不能为空",
password_reg : "密码必须是大小写和数字的组合,长度8-10位",
equealTo:"密码不一致"
},
tel : {
required : "电话号码不能为空",
tel_reg : "格式不正确"
},
IDCard:{
required:"身份证号不能为空",
IDCard_reg:"身份证号码格式不正确(15 或 18位)"
},
email:{
required:"邮箱不能为空", }
}
});
jQuery.validator.addMethod("username_reg", function(value, element) {
var username = /[\u4e00-\u9fa5]/;
return this.optional(element) || !(username.test(value));
});
jQuery.validator.addMethod("password_reg", function(value, element) {
var password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
return this.optional(element) || (password.test(value));
});
jQuery.validator.addMethod("tel_reg", function(value, element) {
var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
return this.optional(element) || (tel.test(value));
});
jQuery.validator.addMethod("IDCard_reg", function(value, element) {
var idcard = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
var idcard1 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
return this.optional(element) || (idcard.test(value))||(idcard1.test(value));
});
jQuery.validator.addMethod("email_reg", function(value, element) {
var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
return this.optional(element) || (tel.test(value));
});
});
</script> </head> <body>
<form action="#" method="post" id="form1">
<table border="1">
<tr>
<td align="right">用戶名:</td>
<td><input type="text" id="username" name="username" /><span></span>
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="text" id="password" name="password" /> <span></span>
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="text" id="repassword" name="repassword" /> <span></span></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>男<input type="radio" name="sex" value="man"
checked="checked" /> 女 <input type="radio" name="sex"
value="woman" />
</td>
</tr>
<tr>
<td align="right">手机号码:</td>
<td><input type="text" id="tel" name="tel" /> <span></span></td>
</tr>
<tr>
<td align="right">身份证:</td>
<td><input type="text" id="IDCard" name="IDCard" /> <span></span></td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="提交" /> <input
type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body> </html>
day32(表单校验js和jquery表单校验)的更多相关文章
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...
- 表单验证—js循环所有表单验证
[封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...
- 简单的表单验证(js、jquery)
//javascript代码 function valForm(){ var username=document.getElementById("username"); var p ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- jQuery表单验证插件——jquery.validate.js
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...
- jquery 表单校验
<link type="text/css" href="<%=basepath%>css/form/validate.css" rel=&qu ...
- jquery.form.js（ajax表单提交）
Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...
- jquery表单验证插件 jquery.form.js ------转载
Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...
随机推荐
- 自己在完第一遍STL和Directx 9.0 游戏开发编程基础书后的体会
如果一本书看一遍就能看懂,说明书对自己相对容易,没有必要在去看第二遍,但是对于大多数书籍,都有自己陌生的知识,看完一遍无法理解的地方,说明就是自己知识点最薄弱的,最需要去理解的地方,一旦自己理解了这些 ...
- git 分支的创建和切换
每次提交,GIT 都会将他们串成一个时间线,截止到目前,只有一个时间线,GIT里叫这个分支为主分支,叫master,HEAD指向master,master指向提交,HEAD指向当前的分支． 一开始的时 ...
- java异常与spring事务关系的知识点查漏补缺
一.基础概念 java的异常结构图 从图中可知 Throwable是所有异常的根,java.lang.Throwable Error是错误,java.lang.Error Exception是异常,j ...
- IDEA 的 Edit 设置
1.设置鼠标悬浮提示 General -- Show quick documentation on mouse move 2.自动导包 3.设置显示行号和方法的间隔符 4.忽略大小写 4.设置取消单 ...
- 如何通过class文件来查看java的版本
我们知道class文件是通过javac编译生成的,如果我们想知道是java的那个版本生成的,该怎么做? 很简单,Linux下只要使用od命令,如下: 前四个字节为固定的cafe babe,接下来的四个 ...
- MySQL 检索数据及提高检索速度的方法
检索数据 mysql> SELECT [DISTINCT] 表名.列名,表名.列名,表名.列名 -- 使用通配符*表示所有列 DISTINCT表示返回不同的值 -> FROM 数据库名.表 ...
- linux(centOS7,mini)，python环境的搭建
今天想试一试python在linux下的工作,在vmware中安装了centOS7版本的linux,先前装过一个带GUI的,但是感觉在虚拟机理跑的太慢,干脆直接装一个最精简的mini版,试一下ifco ...
- jmeter对需要登录的接口进行性能测测试
只需要一步: https://www.testwo.com/blog/7253
- vb中去掉string数组的一部分
今天碰到一个问题,登陆的时候,如果不需要验证手机号为空,则不去验证手机号 因为登陆的时候所有的验证信息都存放在一个数组里 Dim CheckUserInfo() As String ={UserBir ...
- day06作业---字典循环
'''1.1使⽤循环打印以下效果: ***************''' for a in range(1,6): print(a*'*') '''1.2: ***** **** *** ** * ' ...