js表单验证（常用的正则表达式）

js表单验证的正则表达式，test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

语法：let reg=/正则表达式主体/修饰符(可选);

方括号用于查找某个范围内的字符:

[1-10]查找任何从 1 至 10 的数字，[a-z]查找方括号之间的任何字符

元字符是拥有特殊含义的字符

\d：查找数字。\s：查找空白字符

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;margin: 0 auto;}.box>input {width: 160px;height: 30px;border: 1px solid rgb(110, 109, 108);margin-top: 10px;outline: none;}</style><style></style>
</head><body><div class="box"><input type="text" name="" id="" class="uname" placeholder="用户名"><input type="password" name="" id="" class="pwd" placeholder="密码"><input type="email" name="" id="" class="email" placeholder="邮箱"><input type="phone" name="" id="" class="phone" placeholder="手机号"><div><input type="radio" name="" id="">男<input type="radio" name="" id="">女</div><button>点击</button></div><script>let uname = document.querySelector('.uname');let pwd = document.querySelector('.pwd');let email = document.querySelector('.email');let phone = document.querySelector('.phone');let button = document.querySelector('button');button.addEventListener('click', function () {/*校验是否全由8位数字组成 */let reg = /^[0-9]{8}$/;if (reg.test(uname.value.trim()) == false) {uname.style.border = '1px solid red'}/*校验是否中文名称组成 */let reg1 = /^[\u4E00-\u9FA5]{2,4}$/;if (reg1.test(pwd.value.trim()) == false) {pwd.style.border = '1px solid red'}/*校验邮件地址是否合法 */let reg2 = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;if (reg2.test(email.value.trim()) == false) {email.style.border = '1px solid red'}/*校验手机号*/let reg3 = /^^1[0-9]{10}$$/;if (reg3.test(phone.value.trim()) == false) {phone.style.border = '1px solid red'}})</script>
</body></html>

js表单验证（常用的正则表达式）相关推荐

JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1.长度限制 <p>1. 长度限制</p&g ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...
anjular.js表单验证实例
应用声明,控制器 <form action="" method="post" id="myForm" name="logFo ...
通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
JS表单验证(HTML+CSS+JS)详细教程
大家好,今天分享一个HTML+CSS+JS表单验证,这是我前两天学习的一个小demo,在这记录一下. 目录一.效果图二.介绍三.代码 (1)HTML (2)CSS (3)JavaScript J ...
js表单验证密码(确认密码)，密码长度至少8位，并且英文与数字组合
js表单验证密码(确认密码) 案例需求:在注册时,输入密码对其进行密码强度验证,并判断两次输入的密码是否一致.例如,密码长度至少8位,并且英文与数字组合. 代码实现 <p>输入密码:< ...
js中表单验证常用到的正则表达式
正则表达式中的常用模式下面是正则表达式中的一些常用模式. /pattern/ 结果 . 匹配除换行符以外的所有字符 x? 匹配 0 次或一次 x 字符串 x* 匹配 0 次或多次 x 字符串,但匹配 ...
js表单验证处理和childNodes 和children 的区别
一.对提交表单进行空值验证 html代码: 1 <form action="#"onsubmit="return validate_form(this);" ...

js表单验证（常用的正则表达式）

js表单验证（常用的正则表达式）相关推荐

最新文章

热门文章