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插件下载 文件 ...
随机推荐
- 面试题集锦；有关作用域和this的指向
作用域面试题: 1. fn() function fn () { console.log(12) } var as = function () { console.log(45) } 2. var a ...
- 数据库以及pymysql
1.pymysql模块操作数据库详细 import pymysql # user = 'chun' # psw = conn = pymysql.connect(host='localhost',us ...
- oracle 异常错误处理
分类: Oracle 5.1 异常处理概念 5.1.1 预定义的异常处理 5.1.2 非预定义的异常处理 5.1.3 用户自定义的异常处理 5.1.4 用户定义的异常处理 5.2 异常错误传播 5.2 ...
- iOS最全的常用正则表达式大全
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,包括校验数字.字符.一些特殊的需求等等.给自己留个 ...
- c中extern的作用
参考资料: http://www.cnblogs.com/yc_sunniwell/archive/2010/07/14/1777431.html
- Spring IOC（三）单例 bean 的注册管理
Spring IOC(三)单例 bean 的注册管理 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) 在 Spring 中 ...
- Netty 源码 Channel（二）主要类
Netty 源码 Channel(二)主要类 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一.Channel 类图 二. ...
- jsp页面错误的全局处理
网上搜索spring mvc项目全局异常处理: 大致可以找到两种方案 : 方案1: ExceptionHandlerResolver . spring 提供了两种默认实现,当然你也可以自己实现.. 方 ...
- 用visual studio 2017来调试python
https://www.visualstudio.com/zh-hans/thank-you-downloading-visual-studio/?sku=Professional&rel=1 ...
- BS架构如何实现即时消息提醒
转载地址:https://blog.csdn.net/cyjch/article/details/51506434