做到注册页面的时候需要用到表单校验验证用户的输入是否规范,
表单如下
验证规则为 用户名和密码必须为8--20 位数,邮箱验证格式,手机号验证必须为11位。
js代码如下
<script type="text/javascript">
/*表单验证*/
$(function () {
function checkUsername() {
// 获取输入框的值
var username = $("#username").val();
var reg_username = /^\w{8,20}$/;
var flag = reg_username.test(username)
if (flag){// 符合规则
$("#username").css("border","1px solid green")
}
else {
$("#username").css("border","1px solid red")
}
return flag
}
function checkPassword(){
// 获取输入框的值
var password = $("#password").val();
var reg_password = /^\w{8,20}$/;
var flag = reg_password.test(password)
if (flag){// 符合规则
$("#password").css("border","1px solid green")
}
else {
$("#password").css("border","1px solid red")
}
return flag
}
function checkEmail(){
var email = $("#email").val();
var reg_email = /^\w+@\w+\.\w+$/;
var flag = reg_email.test(email)
if (flag){// 符合规则
$("#email").css("border","1px solid green")
}
else {
$("#email").css("border","1px solid red")
}
}
function checkName(){
}
function checktelephone(){
var telephone = $("#telephone").val();
// 手机号必须为11位
var reg_telephone = /^\w{11}$/;
var flag = reg_telephone.test(telephone)
if (flag){// 符合规则
$("#telephone").css("border","1px solid green")
}
else {
$("#telephone").css("border","1px solid red")
}
}
$("#registerForm").submit(function () {
return checkUsername()&&checkPassword()&&checkEmail()&&checktelephone();
// 如果没有返回值或者返回值为true,提交,否则不提交
})
// 失去焦点后调用 注意不加括号
$("#username").blur(checkUsername)
$("#password").blur(checkPassword)
$("#email").blur(checkEmail)
$("#name").blur(checkName)
$("#telephone").blur(checktelephone)
})
</script>
当不符合规则的时候,边框会显示为红色,满足规则后显示为绿色,提交的时候会判断所有的是否符合,全部符合返回true,否则false
扫描二维码关注公众号,回复:
13372415 查看本文章