javascript 常用的正则表达式验证表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #777;
background: #efefef;
}
span {
margin-left: 25px;
font-size: 12px;
padding: 2px 20px 0;
color: #ccc;
}
.right {
color: green;
background: url(images/right.png) no-repeat;
}
.wrong {
color: red;
background: url(images/wrong.png) no-repeat;
}
.pwd {
width: 220px;
height: 20px;
background: url(images/strong.jpg) no-repeat;
}
.str1 {
background-position: 0 -20px;
}
.str2 {
background-position: 0 -40px;
}
.str3 {
background-position: 0 -60px;
}
.str4 {
background-position: 0 -80px;
}
</style>
</head>
<body>
<div class="container">
<label for="inp1">QQ</label><input type="text" name="" id="inp1"><span>输入正确的QQ号码</span><br>
<label for="inp2">手机</label><input type="text" name="" id="inp2"><span>输入13位手机号</span><br>
<label for="inp3">邮箱</label><input type="text" name="" id="inp3"><span>输入正确邮箱</span><br>
<label for="inp4">座机</label><input type="text" name="" id="inp4"><span>输入您的座机</span><br>
<label for="inp5">账号</label><input type="text" name="" id="inp5"><span>亲输入您的账号</span><br>
<label for="inp6">密码</label><input type="text" name="" id="inp6"><span>请输入您的密码</span><br>
<div id="password" class="pwd"></div>
</div> <script type="text/javascript">
var password = document.getElementById("password"); //qq号
addEvent("inp1",function(){
if (/^[1-9][0-9]{4,}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //手机号
addEvent("inp2",function(){
if (/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //邮箱
addEvent("inp3",function(){
if (/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //座机
addEvent("inp4",function(){
if (/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //账号
addEvent("inp5",function(){
if (/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //密码
addEvent("inp6",function(){
if (/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确！");
password.className = "pwd str1";
//只有密码通过了，才能执行密码强度测试
//从大往小判断
if (/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)) {
password.className = "pwd str4";
}else if (/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)) {
password.className = "pwd str3";
}else if (/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)) {
password.className = "pwd str2";
}
}else {
setClassInner(this,"wrong","格式错误！");
}
}); //封装重复代码
function addEvent(str,fn){
document.getElementById(str).onblur = fn;
}
function setClassInner(aaa,rw,txt){
var span = aaa.nextElementSibling || aaa.nextSibling;
span.className = rw;
span.innerHTML = txt;
}
</script>
</body>
</html>
javascript 常用的正则表达式验证表单的更多相关文章
- JavaScript/Jquery：Validform 验证表单的相关属性解释
当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...
- JS正则表达式验证表单
一.解释一些符号相关的意义 1. /^$/ 这个是个通用的格式. ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 2. 里面输入需要实现的功能. ...
- JavaScript---通过正则表达式验证表单输入
验证输入的name只能是数字或字母或下划线 js <script type="text/javascript"> function submitOn(){ var f ...
- 饿了么组件库element-ui正则表达式验证表单，后端验证表单。
前言 老是遇到一些朋友问一些element-ui组件使用相关的基础问题,因为官方文档上并没有提供所有琐碎的功能代码demo.从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码, ...
- JavaScript实现带正则表达式的表单校验（校验成功后跳转）
运行结果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- tp框架之自动验证表单
tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...
- 表单：!!!常用JS： form 表单代码
手机(文本框): <input type="text" name="" maxlength="11" placeholder=&quo ...
- JavaScript 学习（2）表单元素
##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...
- input 的 pattern 验证表单
pattern 用于定义验证输入正则表达式 pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 passwo ...
随机推荐
- 将J2EE的Web项目设置为支持Activiti
<natures> <nature>org.eclipse.jem.workbench.JavaEMFNature</nature> <nature>o ...
- 防止xss攻击。
function htmlEscape(text){ return text.replace(/[<>&\"=]/g,function(match,pos,origina ...
- Wireshark协议分析工具应用
一.Wireshark简介与安装 Wireshark(前称Ethereal)是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用W ...
- 3.27PSP及体会
首先,我还是第一次了解老师这种先喂鸡汤,再打鸡血的行为,大老板的出现让我有些措手不及,我 的 天 啊! 话说这周alpha版本实现,真的是好费脑筋,因为预定是4~6周的项目一周弄完,而且还是在拥有几个 ...
- Jquery_如何扩展方法
jQuery 别名 $ 一. 类级别扩展方法(比如$.ajax(...)) 1> 单个全局方法 $.testExtend = function (){ console.log("单个 ...
- html页面出现,影响布局
这个问题只会在chrome和edge浏览器出现.由于该HTML页面是由PHP解析模版生成的. UTF-8 + BOM编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事本等软件, ...
- 自学Aruba5.1.1-基于时间的Role定义
点击返回:自学Aruba之路 自学Aruba5.1.1-基于时间的Role定义 可以配置一条rule是基于时间来做限制 具体配置时间(Time ranges)步骤如下: 1 建立一个绝对时间范围,命令 ...
- wireshark配合jmeter测试webservice接口
1.首先,获取本地和接口的ip,以便设置过滤 2.wireshark设置过滤 ip.dst==192.168.0.101 and ip.src==61.147.124.120 and http 3.执 ...
- luogu3295 萌萌哒 (并查集+ST表)
如果给相同的位置连边,最后联通块数是n,最后答案就是$9*10^{n-1}$ 但直接连边是$O(n^2)$的 所以事先处理出一个ST表,每次O(1)地给那个ST表连边 最后再一点一点下放,就是把在这层 ...
- 【poj2396】 Budget
http://poj.org/problem?id=2396 (题目链接) 题意 给出一个矩阵,给出每一行每一列的和,以及若干限制条件,限制了其中每一个元素的上下界,求一种可行的方案使得每一行每一列数 ...