Html:
<html ><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/demo_17.css"/><script src="js/jquery-3.4.1.min.js"></script><script src="js/jquery_demo_17.js"></script></head><body> <form method="post" action="#"> <div>Js:$(document).ready(function(){ $(".a1").each(function(){ let temp = $("<strong='reda'>*</strong>"); $(this).parent().append(temp); }); $("form :input").blur(function(){ $(this).parent().find(".a2").remove(); //判断 if ($(this).is("#username")){ if (this.value=="" || this.value.length < 6){ let temp1 = $("<span='a2 error'>用户名不能小于6位</span>"); $(this).parent().append(temp1); } else{ let temp1 = $("<span='a2 righta'>正确</span>"); $(this).parent().append(temp1); } } //end //判断 if ($(this).is("#password")){ if (this.value==""){ let temp1 = $("<span='a2 error'>密码不能为空</span>"); $(this).parent().append(temp1); } else{ let temp1 = $("<span='a2 righta'>正确</span>"); $(this).parent().append(temp1); } } //end //判断 if ($(this).is("#passwords")){ if (this.value=="" || this.value!= $("#password").val()){ let temp1 = $("<span='a2 error'>两次密码不一样</span>"); $(this).parent().append(temp1); } else{ let temp1 = $("<span='a2 righta'>正确</span>"); $(this).parent().append(temp1); } } //end //判断 if ($(this).is("#email")){ if (this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )){ let temp1 = $("<span='a2 error'>邮件的格式不正确</span>"); $(this).parent().append(temp1); } else{ let temp1 = $("<span='a2 righta'>正确</span>"); $(this).parent().append(temp1); } } //end //判断 if ($(this).is("#tel")){ if (this.value=="" || isNaN($(this).val()) || this.value.length !=11){ let temp1 = $("<span='a2 error'>手机号不能为空，必须是11位数字</span>"); $(this).parent().append(temp1); } else{ let temp1 = $("<span='a2 righta'>正确</span>"); $(this).parent().append(temp1); } } //end}); //提交$("#send").click(function(){ $("form :input").trigger("blur"); let temp = $(".error").length; if (temp){ return false; } alert("注册成功"); });//end//重置$("#res").click(function(){ $(".a2").remove();});//end });Css:
* { padding:0; margin:0;}body { font-size:14px; padding:100px;}.one { margin:10px 0;}.one label { width:100px; float:left; text-align:right; height:20px; line-height:20px;}.one input { border:1px solid #ccc; height:20px;}.two { padding-left:100px;}.reda { color:red;}.a2 { width:100px; margin-left:5px; padding:2px; background:#ccc;}.error { background:#ccc url(../images/error.gif) no-repeat; padding-left:25px; padding-right:3px;}.righta { background:#ccc url(../images/right.gif) no-repeat; padding-left:25px; padding-right:3px;}
