js 输入框 正则表达式(菜鸟必看教程)
源码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
用户名:<input type="text"name = "user" id="user"/>
<span id="userSpan" style="font-size: 16pt;"></span>
<br />
密码:<input type="text"name = "pwd" id="pwd"/>
<span id="pwdSpan" style="font-size: 16pt;"></span>
<br />
确认密码:<input type="text"name = "pwd2" id="pwd2"/>
<span id="pwd2Span" style="font-size: 16pt;"></span>
<br />
邮箱:<input type="text"name = "email" id="email"/>
<span id="emailSpan" style="font-size: 16pt;"></span>
<br />
手机号:<input type="text"name = "phone" id="phone"/>
<span id="phoneSpan" style="font-size: 16pt;"></span>
<br />
身份证号:<input type="text"name = "status" id="status"/>
<span id="statusSpan" style="font-size: 16pt;"></span>
<br />
地址:<input type="text"name = "address" id="address"/>
<span id="addressSpan" style="font-size: 16pt;"></span>
<br />
<input type="button" value="校验" onclick="verify()" />
<script type="text/javascript">
function verify() {
//用户名验证
var user = "";
user = document.getElementById("user").value;
var pattl = /^[A-Z][a-zA-Z0-9_]{6,20}$/;
var result = pattl.test(user.trim());
if (result) {
document.getElementById("userSpan").innerHTML = "√"
document.getElementById("userSpan").style.fontSize = "20pt"
} else {
document.getElementById("userSpan").innerHTML = "×"
}
//密码验证
var pwd = "";
pwd = document.getElementById("pwd").value;
var pattl = /^[A-Z][a-zA-Z0-9_]{8,15}$/;
var result = pattl.test(pwd.trim());
if (result) {
document.getElementById("pwdSpan").innerHTML = "√"
document.getElementById("pwdSpan").style.fontSize = "20pt"
} else {
document.getElementById("pwdSpan").innerHTML = "×"
}
//确认密码验证
var pwds = "";
pwds = document.getElementById("pwd2").value;
var pattl = /^[A-Z][a-zA-Z0-9_]{8,15}$/;
var result = pattl.test(pwds.trim());
if (result) {
document.getElementById("pwd2Span").innerHTML = "√"
document.getElementById("pwd2Span").style.fontSize = "20pt"
} else {
document.getElementById("pwd2Span").innerHTML = "×"
}
//邮箱验证
var emails = "";
emails = document.getElementById("email").value;
var pattl = /^[A-z0-9]+@[a-z0-9]+.com$/;
var result = pattl.test(emails.trim());
if (result) {
document.getElementById("emailSpan").innerHTML = "√"
document.getElementById("emailSpan").style.fontSize = "20pt"
} else {
document.getElementById("emailSpan").innerHTML = "×"
}
//手机号验证
var phones = "";
phones = document.getElementById("phone").value;
var pattl = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
var result = pattl.test(phones.trim());
if (result) {
document.getElementById("phoneSpan").innerHTML = "√"
document.getElementById("phoneSpan").style.fontSize = "20pt"
} else {
document.getElementById("phoneSpan").innerHTML = "×"
}
//身份证号验证
var status1 = "";
status1 = document.getElementById("status").value;
var pattl = /^([1-9]){1}[0-9]{17}|[1-9]{1}[0-9]{16}(x|X)?$/;
var result = pattl.test(status1.trim());
if (result) {
document.getElementById("statusSpan").innerHTML = "√"
document.getElementById("statusSpan").style.fontSize = "20pt"
} else {
document.getElementById("statusSpan").innerHTML = "×"
}
//地址验证
var addres = "";
addres = document.getElementById("address").value;
var pattl = /^[\u4e00-\u9fa5]+[\u4E00-\u9FA5A-Za-z0-9_]+$/;
var result = pattl.test(addres.trim());
if (result) {
document.getElementById("addressSpan").innerHTML = "√"
document.getElementById("addressSpan").style.fontSize = "20pt"
} else {
document.getElementById("addressSpan").innerHTML = "×"
}
}
</script>
</body>
</html>
效果图如下：
以上这篇js输入框使用正则表达式校验输入内容的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希
望大家多多支持我们。
相关推荐
-
js输入框使用正则表达式校验输入内容的实例
js输入框输入校验 /*用户名称格式判断--用户名只能为下划线.数字.字母或中文长度不超过10个字符*/ function checkUserName(str) { var reg = /^[_0-9a-zA-Z\u4e00-\u9fa5]{1,10}$/; return reg.test(str); } 以上这篇js输入框使用正则表达式校验输入内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
JS使用正则表达式判断输入框失去焦点事件
效果图 项目的正则表达式规则 1:用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_) 2:密码 大写开头 数字字母符号混合 8-15位 3:确认密码 大写开头 数字字母符号混合 8-15位 4:邮箱 邮箱格式 5:手机号 手机号格式 6:身份证号 身份证号格式 7:地址 中文开头 数字 - 字母 中文混合 项目目录 html代码 由于无法上传bootstrap.min.css 需要样式的需要前往官网下载 bootstrap中文网 <!DOCTYPE html> <html
-
js 输入框 正则表达式(菜鸟必看教程)
源码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 用户名:<input type="text"name = "user" id="user"/> <span id="use
-
JS基础随笔(菜鸟必看篇)
在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型 简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等 下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示 复杂数据类型:在栈内存储引用,如下图 在了解以上两种数据类型的存储方式之后可以区分
-
Nodejs从有门道无门菜鸟起飞必看教程
这是一篇菜鸟教程,这是一篇菜鸟教程,如果你是菜鸟到话. 简单来说Nodejs并不是一门新的语言,但是它可以让我们的JS运行在服务器端,在服务器端写JS代码并且输入输出,也就是说以后要是有人问你JS是不是只能运行在浏览器中,你千万别说,唉,是啊. 记得刚开始学HTML,CSS,JS的时候第一印象就是下载各种浏览器,因为兼容问题T_T,不过现在有个好消息学Nodejs它并没有兼容问题. 如果你想知道为什么Nodejs没有兼容问题,那你的先清楚前端为什么会有兼容问题,这里我提到前端是想说Nodejs它
-
新手如何快速入门Python(菜鸟必看篇)
学习任何一门语言都是从入门(1年左右),通过不间断练习达到熟练水准(3到5年),少数人最终能精通语言,成为执牛耳者,他们是金字塔的最顶层.虽然万事开头难,但好的开始是成功的一半,今天这篇文章就来谈谈如何开始入门Python.只要方向对了,就不怕路远. 设定目标 当你决定入门 Python 时,需要一个清晰且短期内可实现的目标,比如通过学习找一份初级程序员工作,目标明确后,你需要了解企业对初级程序员有哪些技能要求,下面是我从拉勾网找的一个初级 Python 工程师的任职要求: 1.熟悉 Pytho
-
Javascript基础学习笔记(菜鸟必看篇)
什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin
-
javascript作用域、作用域链(菜鸟必看)
javascript的作用域和作用域链是我学习最痛苦的一部分,因为我花了好多时间看了好多技术文档都没有理解.大体知道什么意思了,然后还说不出之所以然来. 通过我大量的测试和看技术文档总结了以下理解,虽然不是很有技术范但是确实能理解了. 1.javascript只有全局和局部之分,那些后台语言的各种修饰符都没有.在函数中不使用var则为全局.如下: <script type="text/javascript"> varname="c#";//全局 wind
-
js字符串操作总结(必看篇)
字符方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符方法</title> </head> <body> <script type="text/javascript"> /* charAt方法和charCodeAt方法都接收一个参数,基于0的
-
详谈Ubuntu PowerShell(小白入门必看教程)
早在去年八月份PowerShell就开始开源跨平台了,但是一直没有去尝试,叫做PowerShell Core. 这里打算简单介绍一下如何安装和简单使用,为还不知道PowerShell Core on Ubuntu的同学们提供一点小小的入门帮助,谢谢大家支持~ PowerShell Core是由Microsoft开发的运行在.Net Core上的开源跨平台的任务自动化和配置管理系统. 1.在Ubuntu 16.04上安装PowerShell Core a)导入公共存储库GPG秘钥 curl htt
-
Java基本语法笔记(菜鸟必看篇)
一.关键字&标识符 1.关键字:被Java语言赋予了特殊含义,用作专门用途的字符串(单词): 2.保留字:现有Java版本尚未使用,但以后版本可能会作为关键字使用.自己命名时要避免使用这些保留字: 3.标识符:凡是自己可以起名字的地方都叫标识符: 4.标识符命名规则(必须遵守): 1.由26个英文字母大小写,0-9,_或$组成: 2.数字不可以开头: 3.不可以使用关键字以及保留字,但能包含关键字以及保留字: 4.Java中严格区分大小写,长度无限制: 5.标识符不能包含空格: 5.Java中的
-
js数组操作方法总结(必看篇)
判断数值数组中各个数字出现的奇偶次数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>数组操作</title> </head> <body> <script type="text/javascript"> var arr=[3,1,2,2,1,3,1