0x01.功能
- 本地对表单的合法性校验。
- 失去焦点立即校验,给出边框颜色提示。
- 当提交时,对不符合条件的给出弹窗提示。
0x02.效果展示
0x03.调用说明
- 基于JQuery框架。
- id名称如代码所示。
- 校验的限制格式如代码所示。
0x04.代码
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
<script>
/*
* 表单校验
* 1.用户名:单词字符,长度8-12位
* 2.密码:单词字符,长度8-12位
* 3.email:邮件格式
* 4.姓名:非空
* 5.手机号:手机号格式
* 6.出生日期:非空
* 7.验证码:非空
* */
//用户名格式的校验
function checkUsername() {
//1.获取用户名
var username = $("#username").val();
//2.正则定义--(8-20位单词字符)
var reg_username=/^\w{8,20}$/;
//3.判断,并给出相应的提示信息
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() {
//1.获取密码
var password = $("#password").val();
//2.正则定义--(8-20位单词字符)
var reg_password=/^\w{8,20}$/;
//3.判断,并给出相应的提示信息
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(){
//1.获取邮箱
var email = $("#email").val();
//2.正则定义--(包含 @ . )
var reg_email=/^\w+@\w+\.\w+$/;
//3.判断,并给出相应的提示信息
var flag=reg_email.test(email);
if(flag){
//合法提示:边框变绿
$("#email").css("border","1px solid green");
}else{
//非法提示:边框变红
$("#email").css("border","1px solid red");
}
return flag;
}
function checkName(){
var name=$("#name").val();
var flag=(name!="");//非空判断
if(flag){
//合法提示:边框变绿
$("#name").css("border","1px solid green");
}else{
//非法提示:边框变红
$("#name").css("border","1px solid red");
}
return flag;
}
function checkTelephone(){
var telephone=$("#telephone").val();
//以1开头,第二位可能是3/4/5/7/8等的任意一个,在加上后面的\d表示数字[0-9]的9位,总共加起来11位结束。
var reg_telephone=/^1(3|4|5|7|8)\d{9}$/;
var flag=reg_telephone.test(telephone);
if(flag){
//合法提示:边框变绿
$("#telephone").css("border","1px solid green");
}else{
//非法提示:边框变红
$("#telephone").css("border","1px solid red");
}
return flag;
}
function checkBirthday(){
var birthday=$("#birthday").val();
var flag=(birthday!="");//非空判断
if(flag){
//合法提示:边框变绿
$("#birthday").css("border","1px solid green");
}else{
//非法提示:边框变红
$("#birthday").css("border","1px solid red");
}
return flag;
}
function checkCheck(){
var check=$("#check").val();
var flag=(check!="");
if(flag){
//合法提示:边框变绿
$("#check").css("border","1px solid green");
}else{
//非法提示:边框变红
$("#check").css("border","1px solid red");
}
return flag;
}
$(function () {
//表单一提交,调用所有校验方法
$("#registerForm").submit(function () {
if(!checkUsername()){
alert("您的用户名格式不正确,请输入8-20个单词字符!");
return false;
}
if(!checkPassword()){
alert("您的密码格式不正确,请输入8-20个单词字符!");
return false;
}
if(!checkEmail()){
alert("您的邮箱格式不正确,请重新输入!");
return false;
}
if(!checkName()){
alert("您的名字为空,请重新输入!");
return false;
}
if(!checkTelephone()){
alert("您的手机号格式不正确,请输入正确的手机号!");
return false;
}
if(!checkBirthday()){
alert("您还未输入出生日期,请重新输入!");
return false;
}
if(!checkCheck()){
alert("您还未输入验证码,请重新输入!");
return false;
}
return true;
});
//当某个组件失去焦点后,同样调用校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
$("#check").blur(checkCheck);
});
</script>
ATFWUS --Writing By 2020–04-11