AI智能应用开发
AI大模型开发
AI鸿蒙开发
AI嵌入式+
AI大数据开发
AI运维
AI测试
跨境电商运营
AI设计
AI视频创作运营
更新时间:2021年03月18日 09时11分07秒 来源:黑马程序员
注册表单检测思路：
1、给a标签绑定点击事件，手动提交表单
2、在提交表单时，进行input输入框不能为空和手机号码验证（手机号格式检测）
下面直接上检测注册表单的代码
<!doctype html>
<html>
<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>
效果
推荐了解热门学科
| java培训 | Python人工智能 | Web前端培训 | PHP培训 |
| 区块链培训 | 影视制作培训 | C++培训 | 产品经理培训 |
| UI设计培训 | 新媒体培训 | 产品经理培训 | Linux运维 |
| 大数据培训 | 智能机器人软件开发 |
