后端工程师的JQuery简单运用——JQuery实现form表单校验

最新推荐文章于 2024-03-14 07:00:00 发布

二百四十九先森

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量800

点赞数

本文链接：https://blog.csdn.net/pengzonglu7292/article/details/87421593

版权

本文介绍了一位后端工程师如何使用JQuery进行表单验证，包括输入框内容空检查、爱好选择、验证码刷新、协议同意检查以及确保所有信息完整后才能注册的功能实现。

摘要由CSDN通过智能技术生成

1、运行效果

2、需求

2-1、初始运行效果为图1，一旦输入框失去焦点，立马读输入框内容进行验证，判定内容为空、内容ok或内容不符合规则。

2-2、爱好至少选择一个。

2-3、点击看不清可以刷新验证码。

2-4、不同意协议无法点击注册。

2-5、点击注册时如果信息未填写完全，form表单不提交数据。

3、具体实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form表单校验</title>
		
		<!--声明jquery文件引入-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			span{
				color: ;
			}
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//一加载成功就要将事件监听加到按钮上
			$(function(){
				//创建验证码
				var code=Math.floor(Math.random()*1000+1000);
				//将验证码赋值给span标签的内容
				$("#code+a").html(code);
				
				
				
				//用户名输入框监听
				$("#un").blur(function(){
					//得到用户输入的字符串对象
					var vaIn=$(this).val();
					//用户名正则对象
					var reg=/^[\u4e00-\u9fa5]{2,4}$/; 
					//对输入框的用户输入进行判断
					if(vaIn==""||vaIn==null){
						$("#un + span").html("*用户名不能为空").css("color","red");
					}else if(reg.test(vaIn)){
						$("#un + span").html("*用户名ok").css("color","green");
					}else{
						$("#un + span").html("*用户名不符合规则").css("color","red");
					}
				});
				
				//监听密码框
				$("#passwd").blur(function(){
					//拿到用户密码框的内容对象
					var passwd=$(this).val();
					//定义密码正则对象
					var reg=/^\w{8,16}$/;
					//对密码进行格式校验
					if(passwd==""||passwd==null){
						$("#passwd&