正则表达式验证表单

最新推荐文章于 2022-05-08 17:13:52 发布
最新推荐文章于 2022-05-08 17:13:52 发布
阅读量781 收藏 3
点赞数
分类专栏： js学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangyuwuzhu/article/details/79743057
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.ttbody{
width: 500px;
margin: 0 auto;
border: 1px solid #A9A9A9;
}
.ipt{
height: 50px;
width: 500px;
padding-top: 5px;
padding-left: 10px;
}
.ipt input[type=text]{
height: 30px;
width: 350px;
}
.ipt input[type=button]{
height: 30px;
width: 350px;
color: #FFFFFF;
background-color: #317EF3;
}
.red{
color:red;
}
.green{
color:green;
}
</style>
<body>
<div class="ttbody">
<form action="http://www.baidu.com" id="form">
<div class="ipt">
<input type="text" placeholder="请输入手机号码" id="phone" /><span id="phoneTips" ></span>
</div>
<div class="ipt">
<input type="text" placeholder="请输入邮箱" id="email" /><span id="emailTips"></span>
</div>
<div class="ipt">
<input type="text" placeholder="请输入身份证号码" id="card" /><span id="cardTips"></span>
</div>
<div class="ipt">
<input type="button" value="注册" οnclick="formCheck()" />
</div>
</form>
</div>
<script>
function formCheck(){
var phone=document.getElementById("phone").value;
var phoneTips=document.getElementById("phoneTips");
var email=document.getElementById("email").value;
var emailTips=document.getElementById("emailTips");
var card=document.getElementById("card").value;
var cardTips=document.getElementById("cardTips");

var phoneRegex=/1{1}[3579]{1}[0-9]{9}/;
var emailRegx=/\w{1,}@{1}\w{1,}(.[a-zA-Z]{2,3}){1,2}/;
var cardRegx=/[0-9]{6}[0-9]{8}[0-9]{2}[0-9]{1}[0-9Xx]{1}/;
if(!phoneRegex.test(phone)){
phoneTips.innerHTML="手机号码不合法";
phoneTips.className="red";
return;
}else{
phoneTips.innerHTML="手机号码合法";
phoneTips.className="green";
}
if(!emailRegx.test(email)){
emailTips.innerHTML="邮箱不合法";
emailTips.className="red";
return;
}else{
emailTips.innerHTML="邮箱合法";
emailTips.className="green";
}
if(!cardRegx.test(card)){
cardTips.innerHTML="身份证不合法";
cardTips.className="red";
return;
}else{
cardTips.innerHTML="身份证合法";
cardTips.className="green";
}
document.getElementById("form").submit();
}
</script>
</body>

</html>


愚城
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用正则表达式验证表单
01-21
表单验证，验证用户输入的数据是否合法 一般的表单验证都是在客户端进行的，用户名重复验证是在服务端进行的一般使用AJax技术 1、用户失去焦点的时候要给出提示 本质，就是用户输入的内容与特定的规则进行匹配 a、把特定的规则写在自己的input对象中，自定义属性 b、把每一个需要验证的input对象，进行事件的绑定 c、规则与用户输入内容进行匹配，正则表达式 正则表达式规则.test(要验证的内容); d、给出明确的提示信息span标签中以及边框的颜色 2、用户点击提交按钮的时候要给出提示
js用正则表达式来验证表单(比较齐全的资源)，JS正则test(）方法
热门推荐
Baple的专栏
01-05 1万+
在学习网页中的表单验证，顺便学习下正则表达式     在网上找了后发现了一个比较齐全的资源，稍微进行了一下排版     复制代码代码如下:     // 检查是否为有效的真实姓名，只能含有中文或大写的英文字母     function isValidTrueName(strName){     var str = Trim(strName);     //判断是否为全英文大写或全中文，
正则表达式表单验证
weixin_45743799的博客
11-24 1241
使用正则表达式验证表单中输入的内容是否符合格式。 原理分析： 1.失去焦点和获取焦点 2.获取内容 3.判断是否符合 4.不符合显示错误号符合显示对号 效果演示 代码演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...
正则表单验证
awesomedy的博客
02-21 422
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; label{ display: inl
jQuery基于正则表达式的表单验证功能示例
10-20
主要介绍了jQuery基于正则表达式的表单验证功能,包括针对字符串、邮件、网址、电话等常见正则验证操作技巧,需要的朋友可以参考下
Ajax和PHP正则表达式验证表单及验证码
12-19
^：正则表达式开始符号 $：正则表达式结束符号 *：匹配前面的字符出现0次或者n次 +：匹配前面的字符出现1次或者n次 ?：匹配前面的字符出现0次或者1次 .：匹配除了换行符以外的所有单个字符 |：或者的...
详解正则表达式表单验证实例
12-13
下面通过一段代码给大家分析表单验证正则表达式，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>正则验证常用表单方法</title> &...
js正则表达式验证表单【完整版】
10-20
本篇文章主要介绍了js正则表达式验证表单的实例，具有很好的参考价值。下面跟着小编一起来看下吧
JS正则验证表单
12-05
JS配合正则对表单验证，里面还有一个html5新的验证表单API。
使用正则表达式进行表单验证
weixin_44978043的博客
09-10 627
需求：使用正则表达式完成基本的表单验证 //获取所有的输入框 //账号验证 var input = document.querySelectorAll('input'); //按键弹起时出发验证 input[0].onkeyup = function () { var value = this.value; //声明一个判断用户名为字母数字下划线组成的6-18的字符串验证规则 var reg = /
用正则表达式写出表单验证
m0_53911328的博客
05-08 2834
表单验证 用户名：长度4~12，英文大小写字母。正则：/^[a-zA-Z]{4,12}$/。 密码：长度6~20，大小写字母、数字或下划线。正则：/^\w{6,20}$/。 确认密码：要求与密码框一样，且两次输入相同。正则：RegExp(‘^’ + 密码框的值 + '$') 手机号码：13、14、15、17、18开头的11位手机号。正则：/^1[34578]\d{9}$/。 邮箱：用户名 @ 域名（域名后缀至少2个字符）。正则：/^(\w+(_|-|.)*)+.
使用正则表达式实现简单的表单验证
weixin_44411850的博客
02-23 4777
正则 - 正则表达式，又名 “规则表达式” - 是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。 - 正则表达式通常用来检索、替换那些符合某个规则的文本。 正则表达式里面的符号 . ： 匹配非换行的任意字符 \ ： 转译符号，把有意义的符号转换成没有意义的字符，把没有意义的字符转换成...
注册表单验证---正则表达式
weixin_34337381的博客
02-22 114
1、电话号码：((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}                |\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$) 2、C#正则表达式： 判断是否为数字   Regex regex=new ...
正则及表单验证
liurong1028的博客
09-25 259
正则的概念 正则表达式(regular expression)是一个描述字符规则的对象。ECMAScript 的RegExp 类（构造函数）表示正则表达式，而String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。 正则表达式主要用来验证客户端的输入数据。 用户填写完表单单击提交按钮之后， 表单就会被发送到服务器，在服务器端通常会用 PHP、ASP.NET...
表单验证—正则表达式
qq_25178609的博客
04-05 1970
正则表达式是一种可以用于模式匹配和替换的强有力的工具，是数据的有效性验证。 一、基本语法 位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式。用户只要把希望查找匹配对象的模式内容放入“/”定界符之间即可。为了能够 使用户更加灵活的定制模式内容，正则表达式提供了专门的“元字符”。所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符，可以用来 规定其前导字符(即位于
elementui表单使用正则表达式验证
最新发布
07-08
在 Element UI 中，可以使用正则表达式进行表单验证。你可以通过 `rules` 属性来定义验证规则，并使用内置的 `pattern` 规则来指定正则表达式。 下面是一个示例，展示了如何使用正则表达式验证一个输入框中的手机号码： ```html <template> <el-form :model="form" :rules="rules"> <el-form-item label="手机号码" prop="phone"> <el-input v-model="form.phone"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { phone: '' // 输入框绑定的数据 }, rules: { phone: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' } ] } }; } }; </script> ``` 在上面的示例中，`rules` 对象中的 `phone` 属性指定了手机号码的验证规则。`required: true` 表示该字段为必填项，`pattern: /^1[3456789]\d{9}$/` 表示手机号码必须符合指定的正则表达式。`message` 属性指定了验证不通过时的错误提示信息。 这样，在用户输入手机号码时，Element UI 会自动根据指定的正则表达式进行验证，并显示相应的错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值