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 ...
随机推荐
- Docker(十三)-Docker save and load镜像保存
持久化docker的镜像或容器的方法 Docker的镜像和容器可以有两种方式来导出 docker save #ID or #Name docker export #ID or #Name docker ...
- Angular $location获取端口号
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- HTMl Dom操作
訪問: getElementById():帶回指定id的所有元素 getElementByTagName():帶回指定標籤名的所有的元素 getElementByClassName():帶回指定類型名 ...
- C#遍历类的属性，然后给其赋值
public class PP { public string a { get; set; } public string b { get; set; } public string c { get; ...
- NCO
NCO 摘自百度百科 (数字振荡器) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . 数字控制振荡器(NCO,numerically controlled oscillator)是 ...
- redis map存储的注意点
- 训练题（代码未检验）（序列前k大和问题）
大厦 Time Limit : 4000/2000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submission ...
- BZOJ4530 BJOI2014大融合（线段树合并+并查集+dfs序）
易知所求的是两棵子树大小的乘积.先建出最后所得到的树,求出dfs序和子树大小.之后考虑如何在动态加边过程中维护子树大小.这个可以用树剖比较简单的实现,但还有一种更快更优美的做法就是线段树合并.对每个点 ...
- BZOJ5372 PKUSC2018神仙的游戏（NTT）
首先有一个想法,翻转串后直接卷积看有没有0匹配上1.但这是必要而不充分的因为在原串和翻转串中?不能同时取两个值. 先有一些结论: 如果s中长度为len的前缀是border,那么其存在|s|-len的循 ...
- BZOJ3998 TJOI2015弦论（后缀数组+二分答案）
先看t=1的情况.显然得求出SA(因为我不会SAM).我们一位位地确定答案.设填到了第len位,二分这一位填什么之后,在已经确定的答案所在的范围(SA上的某段区间)内二分,找到最后一个小于当前串的后缀 ...