目的:通过正则表达式验证电话、密码、QQ、邮箱等是否正确。
思路:第一步布局要有文本输入框用来输入文本,要有一个登录按钮;第二步要获取文本和登录按钮的id,获取文本的value值,定义正则表达式的样式;第三步按钮的点击事件;第四步if判断文本value的字符串和正则是否匹配,匹配弹出"登录成功"else弹出"登录失败"。
知识点:第一步:文本输入用到input标签,具体语句为<input type="text" id="ipt1" />;登录按钮用到button标签。具体语句为<button id=btn1>登录</button>;。
第二步:我们需要用var定义变量字符用来储存获取到id,用document.getElementById("");来获取id,注意里面的引号,具体语句是 var btn1=document.getElementById("btn1");
var ipt1=docement.getElementById("ipt1");。定义正则表达式的样式最好把要验证的样式写出来,通过观察总结每一位上数字的规律总结出正则表达式,这里用到^从行首匹配,$从行尾匹配,[]表示一个数组,放可以存放的字符,{n}表示匹配它前一项n次,这里的语句为var phone=/^1[34578][0-9]{9}$/;
第三步:按钮用到 ipt1 .οnclick=function(){};
第四步:if(){}else{};判断语句。If(判断条件),判断条件要用字符串的match(),它的意思是在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。举例:这个a.match(b);语句的意思是在a里面检索字符串按照b的样式,其中b为正则表达式,
1、电话验证
代码如下
<body> <input type="text" id="ipt1"/> <button id="btn1">登录</button> <script type="text/javascript"> var btn1 = document.getElementById("btn1"); var ipt1 = document.getElementById("ipt1"); var phone=/^1[34578][0-9]{9}$/; btn1.onclick = function () { if (ipt1.value.match(phone)) { alert("登录成功"); } else { alert("登录失败"); }; }; </script> </body> |
效果图:
2、 邮箱验证
验证和手机验证的写法类似,区别就是正则的写法不同,通过观察或者用指定邮箱验证即可,这样更方便我们书写正则表达式,以qq邮箱为例,可以写成var email=/^[1-9][0-9]{4,10}@qq\.com$/;
3、注意事项
在写正则表达式的时候注意格式,声明变量后面是=和//(这里面只放样式),里面没有引号直接写的就是要匹配的样式。其中^首行和$结尾得混合使用容易跟全局搜索g混淆,其中g是去全局搜索,只要有相应的格式即为成功,而^$的使用是绝对匹配,也就是说只有格式完全一致才算成功。