JS的简单表单校验

JS完成表单校验

前言：在前端进行验证码的提前校验，可以减少服务器的访问压力，和增加用户的实时体验。（在此，感谢黑马程序员提供的免费的学习资料）

以百度的注册界面进行分析，我们需要的功能是：
1.输入不符合规范的字符组时，提示明显的错误信息。
2.只有当整个注册环节符合注册规则，点击注册可以进行提交。
3.输入窗口失去焦点时候，自动验证表单信息。

//以单个的注册用户名进行分析
	<form id="registerForm" action="user"> //form表单里要加上action条件，才能对注册信息的数据提交
<table >
				<tr>
			     <td > 
					<label for="username">用户名</label>
				</td>
			    <td >
				<input type="text" id="username" name="username" placeholder="请输入账号">//placeholder,设置输入文本框默认提示字体 
			    </td>
				</tr>
	</table >
</form>

进行script代码的编写

<script>

//输入不符合规范的字符组时，提示明显的错误信息。

function checkUsername(){       //进行当个注册框的校验编写
    //1.通过用户名的 id 获取用户名的值
    
	var username = $("#username").val();  
	
	// 2. 定义注册的规则（使用正则表达式） 要求：单词字符，长度8到20位
	
	var reg_username =/^\w{8,20}$/; 
	
	//3. 进行条件判断
	
		var flag = reg_username.test(username); //用test方法对注册的信息进行规则判断，返回的是boolean值
		
		if (flag){
			//用户名合法，去掉红颜色边框或不显示样式
			$("#username").css("border","");
		} else {
			//用户名非法，加红颜色边框
			$("#username").css("border","2px solid red");
		}
		return flag;
	
}

//.2.只有当整个注册环节符合注册规则，点击注册可以进行提交。
	$(function(){  //添加加载函数

					//submit方法，如果这个方法没有返回值或者返回为true，则表单提交，如果返回为false，则表单不提交
					$("#registerForm").submit(function () {

					return 	checkUsername() ; //如果返回的是true，则校验通过，提交注册信息，如果返回的是false，则表单不提交。
		)}；
	
//3.输入窗口失去焦点时候，自动验证表单信息。
				//当某一个组件失去焦点时，调用对应的校验方法使用 blur 方法
				$("#username").blur(checkUsername); //注意没有括号
					
});

</script>