jQuery表单验证

最新推荐文章于 2024-08-17 21:05:24 发布
最新推荐文章于 2024-08-17 21:05:24 发布
阅读量219 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lpzpp/p/11502893.html
版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script src="../js/jquery-1.12.4.js"></script>
<!--<script src="../js/demo.js"></script>-->
<script>
//1、验证用户名
function checkUserName(t) {
//用户名：6-12位，非空，首字母
let span = t.next();
span.empty();
let v = t.val();
//定义一个正则表达式
let reg = /^[a-zA-Z]\w{5,11}$/;
if (!v) {
span.html("用户名不能为空").css("color", "red");
return 0;
} else if (!reg.test(v)) {
span.html("用户名首位字母,6-12位").css("color", "red");
return 0;
}
span.html("用户名正确").css("color", "green");
return 1;
}

//2、验证密码
function checkPassWord(t) {
//密码：6-12位数字_字母，非空
let span = t.next();
span.empty();
let v = t.val();
//定义一个正则表达式
let reg = /^\w{6,12}$/;
if (!v) {
span.html("密码不能为空").css("color", "red");
return 0;
} else if (!reg.test(v)) {
span.html("密码6-12位数字_字母").css("color", "red");
return 0;
}
span.html("密码正确").css("color", "green");
return 1;
}

//3、验证重复输入密码
function checkRePassWord(t) {
//密码：6-12位数字_字母，非空
let span = t.next();
span.empty();
let v = t.val();
if (!checkPassWord($("#password"))) {
span.html("您的密码不符合要求").css("color", "red");
return 0;
}
if ($("#password").val() !== v) {
span.html("两次密码输入不一致").css("color", "red");
return 0;
}
span.html("重复输入密码正确").css("color", "green");
return 1;
}

//4、验证电话号码
function checkTel(t) {
//电话号码：数字，非空，11位，第一位是1，第二位356789
let span = t.next();
span.empty();
let v = t.val();
//定义一个正则表达式
let reg = /^1[356789]\d{9}$/;
if (!v) {
span.html("电话号码不能为空").css("color", "red");
return 0;
} else if (!reg.test(v)) {
span.html("电话号码必须是数字，非空，11位，第一位是1，第二位356789").css("color", "red");
return 0;
}
span.html("电话号码正确").css("color", "green");
return 1;
}

//5、验证邮箱
function checkEmail(t) {
//邮箱：非空，参考han@126.com,han@yahoo.com.cn,han@yahoo.cn
let span = t.next();
span.empty();
let v = t.val();
//定义一个正则表达式
let reg = /^([a-zA-Z]\w+@\w+\\.com(\\.cn)?)|([a-zA-Z]\w+@\w+\\.cn)$/;
if (!v) {
span.html("邮箱不能为空").css("color", "red");
return 0;
} else if (!reg.test(v)) {
span.html("参考han@126.com,han@yahoo.com.cn,han@yahoo.cn").css("color", "red");
return 0;
}
span.html("邮箱正确").css("color", "green");
return 1;
}

//6、验证性别
function checkGender(t) {
let span = $(".gender_span");
span.empty();
let flag = false;
for (let i = 0; i < t.length; i++) {
if (t[i].checked) {
flag = true;
break;
}
}
if (!flag) {
span.html("性别必须选中一个").css("color", "red");
return 0;
}
span.html("性别选中正确").css("color", "green");
return 1;
}

//7、验证爱好
function checkHobby(t) {
let span = $(".hobby_span");
span.empty();
let flag = false;
for (let i = 0; i < t.length; i++) {
if (t[i].checked) {
flag = true;
break;
}
}
if (!flag) {
span.html("爱好必须选中一个").css("color", "red");
return 0;
}
span.html("爱好选中正确").css("color", "green");
return 1;
}

//8、验证身份证
function checkIdentityNum(t) {
let span = t.next();
span.empty();
let v = t.val();
if (!v) {
span.html("身份证不能为空").css("color", "red");
return 0;
}
//判断长度
let length = v.length;
if (length !== 18) {
span.html("身份证必须18位").css("color", "red");
return 0;
}
//前17位是否是数字
let pre17 = v.substring(0, v.length - 1);
let reg = /^\d{17}$/;
if (!reg.test(pre17)) {
span.html("身份证前17位必须是数字").css("color", "red");
return 0;
}
//截取前2位判断是否符合
let pre2Arr = [
"11", "12", "13", "14", "21", "22", "23",
"21", "22", "23",
"31", "32", "33", "34", "35", "36", "37",
"41", "42", "43", "44", "45", "46",
"50", "51", "52", "53", "54",
"61", "62", "63", "64", "65",
"81", "82", "83"
];
let pre2 = v.substring(0, 2);
let flag = false;
for (let i = 0; i < pre2Arr.length; i++) {
if (pre2Arr[i] === pre2) {
flag = true;
break;
}
}
if (!flag) {
span.html("身份证前2位不符合规则！").css("color", "red");
return 0;
}
//5、截取year判断是否符合要求[1900-2019]
let year = parseInt(v.substring(6, 10));
let date = new Date();
if (year > date.getFullYear() || year < 1900) {
span.html("身份证年份必须在1900-2019").css("color", "red");
return 0;
}
//6、截取month是否符合要求[1-12]
let month = parseInt(v.substring(10, 12));
if (month > 12 || month < 1) {
span.html("身份证月份必须在1-12").css("color", "red");
return 0;
}
//7、截取date是否符合要求[1-28][1-29][1-30][1-31]
let day = parseInt(v.substring(12, 14));
if (month === 4 || month === 6 || month === 9 || month === 11) {
if (day > 30 || day <= 0) {
span.html("身份证日期必须在1-30范围").css("color", "red");
return 0;
}
} else if (month === 2) {
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
if (day > 29 || day <= 0) {
span.html("身份证日期必须在1-29范围").css("color", "red");
return 0;
}
} else {
if (day > 28 || day <= 0) {
span.html("身份证日期必须在1-28范围").css("color", "red");
return 0;
}
}
} else {
if (day > 31 || day <= 0) {
span.html("身份证日期必须在1-31范围").css("color", "red");
return 0;
}
}
//8、截取校验码
let lastChar = v.substring(17);
reg = /^[\dxX]$/;
if (!reg.test(lastChar)) {
span.html("身份证的最后一位校验码只能是数字、X、x").css("color", "red");
return 0;
}
span.html("身份证正确").css("color", "green");
return 1;
}

//9、验证上传文件类型及大小
function checkFiles(t) {
let arr = ["png", "jpg", "bmp", "jpeg", "gif"];
let span = t.next();
span.empty();
let name = "";
let size = 0;
//console.log(t);
if (t[0].files.length === 0) {
span.html("请上传文件").css("color", "red");
return 0;
}
name = t[0].files[0].name;
size = t[0].files[0].size;
let suffix = name.substring(name.lastIndexOf(".") + 1);
let flag = false;
for (let i = 0; i < arr.length; i++) {
if (arr[i] === suffix) {
flag = true;
break;
}
}
if (!flag) {
span.html("请上传图片类型文件").css("color", "red");
return 0;
}
if (size > 3 * 1024 * 1024) {
span.html("请上传图片大小不能超过3MB").css("color", "red");
return 0;
}
span.html("图片正确").css("color", "green");
return 1;

}


$(function () {
//1、username失去焦点验证
$("#username").blur(function () {
checkUserName($(this));
});

//2、password失去焦点验证
$("#password").blur(function () {
checkPassWord($(this));
});

//3、password失去焦点验证
$("#rePassword").blur(function () {
checkRePassWord($(this));
});

//4、tel失去焦点验证
$("#tel").blur(function () {
checkTel($(this));
});

//5、email失去焦点验证
$("#email").blur(function () {
checkEmail($(this));
});

//6、gender改变时
$(".gender").change(function () {
checkGender($(".gender"));
});

//7、hobby改变时
$(".hobby").change(function () {
checkHobby($(".hobby"));
});

//8、identityNum失去焦点验证
$("#identityNum").blur(function () {
checkIdentityNum($(this));
});

//8、identityNum失去焦点验证,注意要使用change事件，否则没有效果
$("#picPath").change(function () {
//console.log($(this));
checkFiles($(this));
});

//执行表单提交验证，如果返回true就提交，否则不提交
$("#fm").submit(function () {
let num = checkUserName($("#username")) &
checkPassWord($("#password")) &
checkRePassWord($("#rePassword")) &
checkTel($("#tel")) &
checkEmail($("#email")) &
checkGender($(".gender")) &
checkHobby($(".hobby")) &
checkIdentityNum($("#identityNum")) &
checkFiles($("#picPath"));
return num > 0;
});

});
</script>

</head>
<body>
<form id="fm" action="http://www.baidu.com" method="post" enctype="multipart/form-data">
<div>
<span>UserName:</span>
<input type="text" name="username" id="username" placeholder="username"/>
<span>*</span>
</div>
<div>
<span>PassWord:</span>
<input type="password" name="password" id="password" placeholder="password"/>
<span>*</span>
</div>
<div>
<span>RePassWord:</span>
<input type="password" name="rePassword" id="rePassword" placeholder="rePassword"/>
<span>*</span>
</div>
<div>
<span>Tel:</span>
<input type="text" name="tel" id="tel" placeholder="tel" maxlength="11"/>
<span>*</span>
</div>
<div>
<span>Email:</span>
<input type="text" name="email" id="email" placeholder="email"/>
<span>*</span>
</div>
<div>
<span>Gender:</span>
<input type="radio" name="gender" class="gender" value="0"/>女
<input type="radio" name="gender" class="gender" value="1"/>男
<span class="gender_span">*</span>
</div>
<div>
<span>Hobby:</span>
<input type="checkbox" name="hobby" class="hobby" value="movie"/>movie
<input type="checkbox" name="hobby" class="hobby" value="sport"/>sport
<input type="checkbox" name="hobby" class="hobby" value="climb"/>climb
<input type="checkbox" name="hobby" class="hobby" value="travel"/>travel
<input type="checkbox" name="hobby" class="hobby" value="football"/>football
<span class="hobby_span">*</span>
</div>
<div>
<span>IdentityNum:</span>
<input type="text" name="identityNum" id="identityNum" maxlength="18" placeholder="rePassword"/>
<span>*</span>
</div>
<div>
<span>Image:</span>
<input type="file" name="picPath" id="picPath"/>
<span>*</span>
</div>
<div>
<input type="submit"/>
<input type="reset"/>
</div>
</form>
</body>
</html>

转载于:https://www.cnblogs.com/lpzpp/p/11502893.html

MaGe0924
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 密码验证 字母加数字或符号的组合密码，不能单独使用数字、字母或字符及 常用正则
Gabriel576282253的专栏
03-04 3258
function validPsw() { var password = $(".password").val(); var num = 0; var number = 0 ; var letter = 0 ; var bigLetter = 0 ; var chars = 0 ; if (pass...
JQUERY之表单验证案例
diaoting2815的博客
12-08 218
<!-- 需求： 用户注册页面要有用户名、密码、确认密码、邮箱 用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合 密码框：密码不能为空，六到八位数字或字母的组合 确认密码框：确认密码不能为空，六到八位数字或字母的组合，并且庶和密码框中的内容保持一致 邮箱框：邮箱需要输入正确的邮箱格式并且不...
jQuery中的merge()方法
mm_hello11的博客
04-22 3609
定义和用法 $.merge() 函数用于合并两个数组内容到第一个数组。语法 $.merge( first, second )first Array类型 第一个用于合并的数组，合并后将包含第二个数组的内容 second Array类型 第二个用于合并的数组，该数组不会被修改var a1 = [0,1,2]; var a2 = [2,3,4]; console.log($.merge( a1
jquery问卷调查或心理测试 一项一项选择最终得分
ICode联盟
12-10 217
下载地址 $(document).ready(function(){ var i=0; var sld=0; var res=0; var len=$("#issue").find("div.cnt").length; var prog=100; //$("#prog").css("width"); var ht=420; var speed=500; var page="data/result.html"; function setporogress(j){ i+=j; i=(i<0)? 0:i;
jquery表单验证
m0_73030012的博客
09-17 263
确认密码密码
Jquery表单验证非空
qq_44339899的博客
07-24 1859
知识内容来自 W3School 教程 简单的表单验证，个人觉的有点繁琐，删除了点，不知道是优化还是加漏洞????，所以 把网站的源码贴出来大佬有时间看看来批评我，但是好使，绝对管用 写在页面和js文件内都可以，直接调用方法，别忘记引入js+jQuery文件就行 二手源码附上： //验证用户名非空 这段是处理登录用户名 function ValiDate_UserName(field, alerttxt) { var $UserName= $.trim($("#UserName").val())
jQuery表单验证插件
weixin_63719049的博客
03-24 1535
表单验证插件 表单验证规则 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #myform label.error{ color: #FF0000; } </style> <script src="js/jquery-3.3.1.js"></
jQuery实现表单验证
热门推荐
生有涯，知无涯
04-24 4万+
1.基于html表单，利用jQuery实现表单验证功能。 2.html基本结构和样式： 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h...
Java Web Jquery表单验证
07-26
Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1...
Jquery表单验证
06-30
**jQuery表单验证详解** 在Web开发中，表单验证是一项至关重要的任务，它确保用户输入的数据符合预期的格式和规则，从而防止错误数据的提交并提高用户体验。jQuery，一个流行的JavaScript库，提供了简单易用的API来...
jquery表单验证实例仿Toast提示效果
10-20
3. jQuery表单验证 这里使用jQuery进行表单验证，主要是通过监听输入框的blur事件（即输入框失去焦点）来触发验证。在事件处理函数中，首先获取输入框中的手机号码，然后使用正则表达式进行匹配验证。如果手机号码...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 277
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1110
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
2401_85743969的博客
08-17 346
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 170
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
使用 Node.js 和 Express 框架通过网页访问GPIO和嵌入式 Linux 系统中使用 GSM/3G/4G 模块
最新发布
m0_45463480的博客
08-17 639
想要快速开发嵌入式 Linux 网络应用，控制硬件 GPIO，从而使得用户能够远程控制和监控系统。主要目的是向读者展示开发使用文件系统控制 GPIO 的 Node 代码、创建用户有好的界面、以及运行基于 Express 框架使用 AJAX 通客户端进行通信的网络服务器。为了理解客户端应用，建议先了解 HTML+CSS、jQuery 和 AJAX 知识。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 560
NVDLA专题4：具体模块介绍——Convolution DMA
JQuery表单验证实战与扩展
"jQuery表单验证大全，用于学习参考" 在Web开发中，表单验证是一项必不可少的任务，确保用户提交的数据符合预期格式和规则。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作和事件处理，而`jquery.validate....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值