|
1、注册表单检测 思路： ①给a标签绑定点击事件，手动提交表单 ②在提交表单时，进行input输入框不能为空和手机号码验证（手机号格式检测） [HTML] 纯文本查看 复制代码 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<form action="demo.php" id="frm">
手机号码: <input type="text" id="phone"><span></span><br>
密码: <input type="text" id="pass" ><span></span><br>
<input type="submit" value="注册" id="btn">
</form>
<script>
$("#btn").click(function(){
//设置一个变量,用来判断是否提交表单
var flag=0;
//做一个手机号码的正则
var preg=/^1[3-9]\d{9}$/;
//获取手机好号码
var phone=$("#phone").val();
if(phone==''){
flag++; //当手机号码为空的时候将值加一,用于判断是否提交表单
$("#phone").next().html("手机号码不能为空");
}else if(!preg.test(phone)){
flag++;
//验证手机号码
$("#phone").next().html("手机号码格式不正确");
}else{
//手机号码符合要求则将后面的提示信息去掉
$("#phone").next().html("");
}
//密码验证
if($("#pass").val()==""){
flag++;
// $("#pass").parent().find("span").html("密码为空");
$("#pass").next().html("密码为空");
}else{
// $("#pass").parent().find("span").html("");
$("#pass").next().html("");
}
//通过flag的值验证是否提交表单
if(!flag){
$("#frm").submit();
}else{
return false;
}
})
</script>
</body>
</html>
HTML代码：
JS代码：
判断手否提交表单:
效果展示:
| 
收藏
淘帖
踩
