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插件下载 文件 ...
随机推荐
- org.springframework.web.util.Log4jWebConfigurer
org.springframework.web.util.Log4jWebConfigurer @Deprecated Deprecated. as of Spring 4.2.1, in favor ...
- 在浏览器中运行java applet
最近在看java applet,在eclipse中可以正常运行,于是想试试在浏览器中运行.但途中遇到很多问题,网上很多解答也不全面,于是想把自己的解决过程记录下来. [1]首先,编写的applet程序 ...
- PAT 1081 检查密码（15） （代码+思路）
1081 检查密码(15 分) 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母.数字和小数点 .,还必须既有字母也 ...
- Linux CentOS 7 & JDK 1.7 安装与配置
前言 简单记录一下在CentOS 7中安装配置JDK 1.7的全过程~ 下载 首先是jdk 1.7 64bit & 32bit的下载地址: jdk-7u79-linux-x64.tar.gz ...
- FPKM与RPKM
FPKM与RPKM (2015-01-09 23:55:17) 转载▼ 标签: 转载 原文地址:FPKM与RPKM作者:Fiona_72965 定义: FPKM:Fragment Per Kil ...
- POJ2349 Arctic Network
原题链接 先随便找一棵最小生成树,然后贪心的从大到小选择边,使其没有贡献. 显然固定生成树最长边的一个端点安装卫星频道后,从大到小选择边的一个端点作为卫星频道即可将该边的贡献去除. 所以最后的答案就是 ...
- django admin管理后台中文添加问题
django版本号 1.7.8 #create database mydb character set utf8;#django-admin.py startproject mysite#设置sett ...
- 看懂 Fiddler 的瀑布图
最近准备给组内的新同学们分享下 Fiddler 这枚神器,可以讲的地方太多,我打算把一节课讲不完的内容写在博客上,大家可以随便看看.今天先介绍下 Fiddler 的瀑布图. 每个网络请求都会经历域名解 ...
- A面&B面
难难难.道是玄,不遇知音不可谈.遇了知音聊两句,免教那枉费舌尖.难得今天心情不错,反思毕业这五年的种种,有浑噩.迷茫.彷徨.莽撞.执着.困顿.不惧,走到今天迈过了几道坎早已忘却,同时也还在询问自己值不 ...
- Tomcat配置Solr4.8
简介:Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http G ...