plugin de validation de formulaire jquery-js tutoriel-php.cn

plugin de validation de formulaire jquery

韦小宝

Libérer： 2017-11-22 11:20:56

original

1782 Les gens l'ont consulté

jqueryValidation de formulaire Ce plug-in nous convient très bien pour l'utiliser dans nos propres projets. Ceux qui sont intéressés par jquery peuvent également l'étudier. et apprenezjquery.

Démonstration d'implémentation :

plugin de validation de formulaire jquery

Démonstration de code :

<!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>

Copier après la connexion

C'est tout Pour le code source du plug-in de validation de formulaire jquery, si vous êtes intéressé, vous pouvez vous rendre sur le site Web PHP chinois pour rechercher plus de connaissances connexes !

Recommandations associées :

jquery implémente la vérification coulissante côté PC

animation de sélection de titre jquery

code source de déverrouillage par geste jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!