正则表达式—简单验证

目的:通过正则表达式验证电话、密码、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 .onclick=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是去全局搜索,只要有相应的格式即为成功,而^$的使用是绝对匹配,也就是说只有格式完全一致才算成功。

时间: 2024-10-10 07:08:16

正则表达式—简单验证的相关文章

正则表达式简单入门

 正则表达式简单入门    正则表达式在平常编程中有着大量的应用,对于任何一个想学习编程的人来说,正则表达式是一个必须掌握的知识. 废话不多说,下面先对正则表达式做一个简单的入门介绍,在后续的文章中,将会进行详细的介绍.    一.元字符 元字符一共有12个:$ ( ) [ { ? + * . ^ \ | 元字符有特殊的含义,如果要使用其字面值,则必须对其进行转义. 如: \$  \*  \( 等等 二.控制字符或不可打印字符 \a  警报 \e  退出 \f  换页 \n  换行 \r 

使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址, 信息表内容通过表单输入,提交前先使用正则表达式进行验证,联系地址不能超过20个字符, 每输入一名学生的信息,提交后,表格增加一行,表格不能被选择、复制。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <!--        描述:使用文档对象在页面上创建学生信息表.        信息表包括学号.姓名.性别.电子邮件.联系电话.个人主页和联系地址,        信息表内容通过表单输入,提交前先使用

jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src="jquery-1.3.1.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"&g

正则表达式--简单记忆二

全部符号解释 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个 向后引用.或一个八进制转义符.例如,'n' 匹配字符 "n".'\n' 匹配一个换行符.序列 '\\' 匹配 "\" 而 "\(" 则匹配 "(". ^ 匹配输入字符串的开始位置.如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 '\n' 或 '\r' 之后的位置. $ 匹配输入字符串的结束位置.如果设置了RegExp

正则表达式--简单记忆

许多程序语言都支持利用正则表达式进行字符串的匹配操作,对正则表达式一直有点模糊,在这里记下来,备后来回顾 "." 代表任何一个字符 "\\d" 代表0至9的任何数字 "\\D" 代表任何一个非数字字符 "\\s" 代表空格字符 "\\S" 代表非空格类字符 "\\w" 代表可用于标识符的字符 使用一对方括号括起若干字符,代表方括号中的任何一个字符 [abc] 代表a b c 中的任何一个

js正则表达匹配&amp;简单验证

var common = { isNotNull:function(object){ if(object == null || object == '' || object == undefined){ return false; } return true; }, MBToGB:function(mb){ return Math.round(((mb / (1024))*100)/100); }, myRound:function(number){ var result = Math.roun

textbox只能输入数字或中文的常用正则表达式和验证方法

验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数:^\+?[1-9][0-9]*$ 验证非零的负整数:^\-[1-9][0-9]*$ 验证非负整数(正整数 + 0):^\d

JS简单验证password强度

<input type="password" id="password" value=""/><button id="validate">验证</button> <script type="text/javascript"> $("#validate").click(function(){ if(isSimplePwd($("#p

正则表达式的几个简单验证

正则表达式(regular expression)是一个描述字符模式的对象.ECMAScript的RegExp类表示正则表达式,而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数. 正则表达式主要用来验证客户端的输入数据.用户填写完表单单击按钮之后,表单就会被发送到服务器,在服务器端通常会用PHP.ASP.NET等服务器脚本对其进行进一步处理.因为客户端验证,可以节约大量的服务器端的系统资源,并且提供更好的用户体验. //1 检查邮政编码,共六位,数字,第