JQ实现效果：用户名表单验证

逃离我推掉我的手 2022-06-10 23:16 188阅读 0赞

步骤：

1、判断当前失去焦点的元素是“用户名”还是“邮箱”

2、“用户名”，看是否小于6位，如果小于，就设置红色提醒

3、“邮箱”，用正则表达式判断是否符合邮箱格式，不符合就红色字提醒，符合就用绿色字提醒

4、将文字信息<span>追加到当前元素的父元素的最后。ps：注意移除前面已经出现的字。

<!DOCTYPE html>
    <html>
    <head>
    	<title>Char 5.1.6</title>
    	<meta charset="utf-8"/>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			//给必须项目添加标志
    			$("form :input.required").each(function() {
    				var $required = $("<strong class='high'>*</strong>");
    				$(this).parent().append($required);
    			});
    			//判断用户名是否正确
    			$('form :input').blur(function(event) {
    				var $parent=$(this).parent();
    				//当发现原本有文本时，就删掉，增加新的
    				$parent.find('.formtips').remove();
    				if($(this).is('#username')){
    					if(this.value ==''||this.value.length<6){
    						var errorMsg='请输入至少6位的用户名';
    						$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
    					}else{
    						var okMsg='输入正确';
    						$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
    					}
    				}
    				//判断email地址是否填写正确
    				if ($(this).is('#email')) {
    					//判断的正则表达式
    
    					if (this.value==''||(this.value!=''&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
    						var errorMsg="请输入正确的email地址";
    						$parent.find('.formtips').remove();
    						$parent.append('<span calss="formtips onError">'+errorMsg+"</span>");
    					}else
    					{
    						var okMsg="ok";
    						$parent.append('<span class="formtips okMsg">'+okMsg+"</span>");
    					}
    				}
    			});
    			//按钮send的触发功能
    			$("#send").click(function(event) {
    				$("form .required:input").trigger('blur');
    				var numError=$("form .onError").length;
    				if (numError) {
    					return false;
    				}
    				alert("注册成功！");
    			});
    		})
    	</script>
    </head>
    <body>
    <h2>注册</h2>
    <form>
    	<div class="int">
    		<label>姓名：</label>
    		<input type="text" name="text" id="username" class="required">
    	</div>
    
    	<div class="int">
    		<label>邮箱：</label>
    		<input type="text" name="text" id='email' class="required">
    	</div>
    
    	<div class="int">
    		<label>个人资料：</label>
    		<input type="text" name="text">
    	</div>
    
    	<div class="submit">
    		<input type="button" name="btn" id="send" value="提交"/>
    	</div>
    </form>
    
    </body>
    </html>