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插件下载 文件 ...
随机推荐
- select into tb_temp2 from tb_temp1 创建临时表实现上一个、下一个功能，使用完毕就删除临时表
好久没有写过Sql了,今天遇到一个问题,业务逻辑是: 一个商品可以属于多个分类,在显示商品详情的时候,要求可以点击“上一个”,“下一个” 查看和该商品在同一个分类下的其他商品,商品具有排序号. 这样我 ...
- python 面向对象编程 之 析构方法
析构方法:当对象在内存中被释放的时候,自动触发执行 如果产生的对象仅仅只是用户级别的, 那么无需定义__del__,如果对象还会向操作系统发生系统调用, 即一个对象有用户级别与内核级两种资源, 比如打 ...
- 17.Mysql分区
17.Mysql分区分区是指根据一定的规则把一个表分解成多个部分,逻辑上仍是一张表,实际上由多个物理分区对象组成.分区对于应用是完全透明的,不影响业务逻辑和SQL编写.分区的优点: 可以存储更多的数据 ...
- Oracle_高级功能(1) 数据库设计
1.三范式规范化关系模式称为范式.第一范式:在一个关系模型R中,如果R的每一个属性的值域中的值都是不可再分的最小数据单位, 则称R为第一范式(1NF).第二范式:如果一个关系模型R属于1NF,并且R的 ...
- UVA 11235 (RMQ) 频繁出现的数值
题目大意是给出一个非降序排列的数组,然后n个询问,每次询问一个区间内出现次数最多的数的次数. 首先要弄清楚题目的是一个非降序的数组,那么说明相等的数都会在一起,类似于11223334569这样的,那么 ...
- hdu 5491(2015合肥网赛)The Next
题目;http://acm.hdu.edu.cn/showproblem.php?pid=5491 题意就是,T组测试数据.然后L,S1,S2.L的二进制中有x个1,x满足 S1<=x< ...
- GTK图形控件中的rc文件使用心得
转载自: 1.http://blog.csdn.net/saintwinona/article/details/6972754 2. (1).GTK 主题指南 1.Widgets GT ...
- Java中的权限修饰符
What:访问控制权限是可以设置代码的访问范围. Where:访问权限既可以修饰类中的属性,又可以修饰类中的方法,而public和default还可以修饰类. 在同一个java文件里,公有类有且仅有一 ...
- mysql 多表查询先排序，然后再取分组<mysql 先order by，然后再取group by分组>
select * from ( select cv.lasttime,cm.mailbox,cv.clientip from `co_user_visitlog` as cv INNER JOIN ` ...
- 论坛：Html代码生成器>>FCKeditor的使用
>>文件准备: >>例1: >>例2: >>例3:指定工具栏 添加 JS代码: