1
、注册表单检测
思路：
①给
a
标签绑定点击事件，手动提交表单
②在提交表单时，进行
input
输入框不能为空和手机号码验证（手机号格式检测）
[HTML]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!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代码：
判断手否提交表单:
效果展示:
