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>