登录  /  注册
首页 > web前端 > js教程 > 正文

jquery表单验证插件

韦小宝
发布: 2017-11-22 11:20:56
原创
1540人浏览过

jquery表单验证插件这个非常适合我们用在自己的项目里,对jquery感兴趣的也可以研究一下,学习学习jquery

实现演示:

~~IOS(5XZ3MIM9WCSLAJ}37.png

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>PHP中文网--注册页面</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			form {
				width: 570px;
				height: 300px;
				margin: 100px auto;
			}
			
			label {
				width: 64px;
				float: left;
				clear: left;
				height: 36px;
				line-height: 36px;
				margin-top: 10px;
			}
			
			input {
				width: 300px;
				height: 36px;
				line-height: 36px;
				margin-top: 10px;
				text-indent: 8px;
				font-size: 16px;
				font-family: "微软雅黑";
				border: 1px solid #ccc;
				float: left;
			}
			
			#sub {
				width: 302px;
				height: 40px;
				border: 1px solid #ccc;
				background: #888;
				color: #fff;
				font-size: 18px;
				text-indent: 0;
			}
			
			.spa {
				height: 36px;
				line-height: 36px;
				width: 204px;
				display: inline-block;
				float: left;
				font-size: 12px;
				color: #BD362F;
				text-indent: 10px;
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<form action="" method="post">
			<label id="name">姓 名:</label><input type="text" name="username" id="username" value="" placeholder="请输入姓名" /><span class="spa spa1"></span><br />
			<label id="phone">手机号:</label><input type="text" name="userphone" id="userphone" value="" placeholder="请输入手机号" /><span class="spa spa2"></span><br />
			<label id="address">地 址:</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="请输入地址" /><span class="spa spa3"></span><br />
			<label>    </label><input type="submit" value="注册" id="sub" />
		</form>
		<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
		<script type="text/javascript">
			window.onload = function() {
					$("#username").focus()
				}
				/************************  失焦判断  **********************************/
			$("input").blur(function() {
					$(".spa").css("color", "#BD362F")
					if($(this).is("#username")) { //姓名判断
						var na = /^[\u4E00-\u9FA5]{2,4}$/
						if($("#username").val() != "") {
							if(!(na.test($("#username").val()))) {
								$(".spa1").text("请输入2-4个汉字");
								$(this).css("border", "1px solid #BD362F")
								return false;
							} else if(na) {
								$(".spa1").text("");
								return true;
							}
						} else {
							$(".spa1").text("");
						}
					}
					if($(this).is("#userphone")) { //手机号判断
						var ph = /^1[3|5|7|8|][0-9]{9}$/
						if($("#userphone").val() != "") {
							if(!(ph.test($("#userphone").val()))) {
								$(".spa2").text("请输入正确手机号");
								$(this).css("border", "1px solid #BD362F")
								return false;
							} else if(ph) {
								$(".spa2").text("");
								return true;
							}
						} else {
							$(".spa2").text("");
						}
					}

					if($(this).is("#useraddress")) { //地址判断
						var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
						if($("#useraddress").val() != "") {
							if(!(ad.test($("#useraddress").val()))) {
								$(".spa3").text("请输入正确地址");
								$(this).css("border", "1px solid #BD362F")
								return false;
							} else if(ad) {
								$(".spa3").text("");
								return true;
							}
						} else {
							$(".spa3").text("");
						}
					}
				})
				/********************** 聚焦提示 ************************/
			$("input").focus(function() {
					if($(this).is("#username")) {
						$(".spa1").text("四个汉字").css("color", "#aaa")
						$(this).css("border", "1px solid #aaa")
					}
					if($(this).is("#userphone")) {
						$(".spa2").text("11位手机号码").css("color", "#aaa")
						$(this).css("border", "1px solid #aaa")
					}
					if($(this).is("#useraddress")) {
						$(".spa3").text("最少8个字符(汉字、字母和数字)").css("color", "#aaa")
						$(this).css("border", "1px solid #aaa")
					}
				})
				/*********************** 提交验证 ***************************/
			$("#sub").click(function() {
				var na = /^[\u4E00-\u9FA5]{2,4}$/; //姓名正则
				var ph = /^1[3|5|7|8|][0-9]{9}$/; //手机号正则
				var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正则
				if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {
					return true;
				} else {
					if($("#username").val() == "") {
						$(".spa1").text(&#39;请你填写用户名&#39;)
					}
					if($("#userphone").val() == "") {
						$(".spa2").text(&#39;请你填写手机号&#39;)
					}
					if($("#useraddress").val() == "") {
						$(".spa3").text(&#39;请你填写地址&#39;)
					}
					return false;
				}
			})
		</script>
	</body>
</html>
登录后复制

以上就是jquery表单验证插件的源码,感兴趣的可以到PHP中文网搜索更多相关知识!

相关推荐:

jquery实现pc端滑动验证

jquery标题选择动画

jquery实现手势解锁源码

以上就是jquery表单验证插件的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号