JS使用正则表达式提交页面验证的代码
如何用正则表达式提交验证
首先，我们先用一首歌活跃一下气氛！
门前大桥下
游过一群鸭
快来快来数一数
二四六七八
嘎嘎嘎嘎
真呀真多呀…
stop，我们来进入正题↓
1：让你们看一下我么老师布置的作业
2：需要呈现的效果是：看图片
3：那么，下面需要的就是代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
用户名：
<input type="text" name="Name" id="Name" /><br/>
密码：
<input type="text" name="pwd" id="pwd" /><br/>
确认密码：
<input type="text" name="disPwd" id="disPwd" /><br/>
邮箱：
<input type="text" name="email" id="email" /><br/>
手机号：
<input type="text" name="phone" id="phone" /><br/>
身份证号：
<input type="text" name="ID" id="ID" /><br/>
地址：
<input type="text" name="address" id="address" /><br/>
<input type="button" value="验证" onclick="verification()" />
<script type="text/javascript">
function verification() {
var Name= document.getElementById("Name").value;
var pwd = document.getElementById("pwd").value;
var disPwd = document.getElementById("disPwd").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var idNumber = document.getElementById("ID").value;
var address = document.getElementById("address").value;
var NameRule = /^[A-Z][A-z0-9_]{5,19}$/;
var pwdRule = /^[a-zA-Z]\w{7,14}$/;
var disPwdRule = /^[a-zA-Z]\w{7,14}$/;
var emailRule = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var phoneRule = /^(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 idNumberRule = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
var addressRule = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
if(NameRule.test(user.trim())) {
if(pwdRule.test(pwd.trim())) {
if(disPwdRule.test(disPwd.trim())) {
if(emailRule.test(email.trim())) {
if(phoneRule.test(phone.trim())) {
if(idNumberRule.test(idNumber.trim())) {
if(addressRule.test(address.trim())) {
alert("验证成功");
} else {
alert("地址不合法");
}
} else {
alert("身份证号不合法");
}
} else {
alert("手机号不合法");
}
} else {
alert("邮箱不合法");
}
} else {
alert("确认密码不合法");
}
} else {
alert("密码不合法");
}
} else {
alert("用名不合法");
}
}
</script>
</body>
</html>
提示：老师说这种代码后期不太好管理，还有更好的办法， 我主要是觉得这种对于我来说更好理解，所以我也没去学习另一种，仅供参考哈。
4：效果图来啦，嘿嘿
我用的是alert这个方法，网页提示。
总结
以上所述是小编给大家介绍的JS使用正则表达式提交页面验证的代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
js正则表达式验证密码强度【推荐】
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证密码强度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400
-
2019手机号码JS正则表达式验证实例代码
概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串的一种过滤逻辑. 简介 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串
-
详解js正则表达式验证时间格式xxxx-xx-xx形式
在项目中,我们经常会遇到时间问题,有时候是使用时间插件,让用户选择,但有时应客户要求,能够自行输入时间,那么,我们如何来确定用户输入的时间格式是否正确,输入的时间是否合法呢? 这个时候需要用到正则表达式,接下来,简单讲解我的验证实例,以验证时间格式2017-01-01格式为例: 1.首先,我们需要获得用户输入的内容: 2.其次,我们需要验证用户输入的内容是否为2017-01-01格式: 3.然后,验证格式正确后,需要验证输入的时间是否合法: 4.如果用户输入的是正确的,合法的时间格式,那么返回输
-
js正则表达式验证表单【完整版】
效果图: 图(1)初始图 图(2)填入信息校验 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完整验证表单</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} bod
-
最常用的15个前端表单验证JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则. 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP
-
JS正则表达式验证账号、手机号、电话和邮箱是否合法
验证帐号是否合法 验证规则:字母.数字.下划线组成,字母开头,4-16位. function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.test(str)){ alert("正确"); }else{ alert("错误"); } } checkUser("jihua_cnblogs");//调用 验证手机号码 验证规则:11位数字,以1开头. function checkMobil
-
JS使用正则表达式验证身份证号码
废话不多说了,先给大家看一段代码吧 function isCardNo(card) { // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if(reg.test(card) === false) { alert("身份证输入不合法"); return false; } } 最近的项目中用的需要调用实名认证的接口,实名
-
JS中验证整数和小数的正则表达式
验证整数和小数的正则表达式 网上很多关于验证小数的正则表达式,但是很多都不是百分百正确,所以我结合一些前辈的经验,自己写了一个. 验证非0开头的无限位整数和小数.整数支持无限位,小数点前支持无限位,小数点后最多保留两位. js代码如下: var reg = /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^([^0][0-9]+|0)$/; 单独拆分: 1. 整数:/^([^0][0-9]+|0)$/ 2. 小数:/^(([^0][0-9]+|0)\.([0-9]{1,2})
-
JS使用正则表达式提交页面验证的代码
如何用正则表达式提交验证 首先,我们先用一首歌活跃一下气氛! 门前大桥下 游过一群鸭 快来快来数一数 二四六七八 嘎嘎嘎嘎 真呀真多呀- stop,我们来进入正题↓ 1:让你们看一下我么老师布置的作业 2:需要呈现的效果是:看图片 3:那么,下面需要的就是代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title><
-
PHP防止刷新重复提交页面的示例代码
PHP防止刷新重复提交页面的示例代码 作为phper,我们在开发和学习php过程中,难免要经常的接受处理表单数据,然而处理表单的时候总会有一个问题,困扰大家,刷新页面重复提交的问题.如何防止刷新页面重复提交呢? PHP防止刷新重复提交,通过不断刷新(Refresh or Reload)表单提交页面,可以重复提交表单内容,可以利用 PHP 的 Session 来避免这一点,Session 保存在服务器端,在 PHP 过程中改变 Session 变量的值后,即保存在服务器端,下次访问这个变量时,得到
-
基于JS组件实现拖动滑块验证功能(代码分享)
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m
-
js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表
-
利用jquery正则表达式在页面验证url网址输入是否正确
本文介绍的是使用jQuery正则表达式在前台页面验证url网址输入是否正确,代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"&
-
node.js 一个简单的页面输出实现代码
安装过程就不说了.如果成功是能使用node的命令.node.js调试是非常方便的.每种后台语言都有一个向那个黑黢黢的控制台团输出语用的命令.node.js沿用FF那套东西,也就是console对象与其方法.我们首先建一个example.js文件,内容如下,然后在控制台打开它. 复制代码 代码如下: console.log("hello node.js") for(var i in console){ console.log(i+" "+console[i]) } n
-
基于JS实现bookstore静态页面的实例代码
先给大家展示下效果图,如果感觉还不错,请参考实现代码: bookstore静态页面代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #right{ float: right; vertical-align: middle; line-height:50px; margin-right:70
-
js用正则表达式控制价格输入实现代码
用正则表达式控制价格输入 var record={ num:"" } var checkDecimal=function(n){ var decimalReg=/^\d{0,8}\.{0,1}(\d{1,2})?$/;//var decimalReg=/^[-\+]?\d{0,8}\.{0,1}(\d{1,2})?$/; if(n.value!=""&&decimalReg.test(n.value)){ record.num=n.value; }e
-
JS表单提交验证、input（type=number） 去三角 刷新验证码
在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,代码,踩过的坑:注意点: 1.只有通过form里面的 <button type="submit" >提交</button>进行表单的提交才会触发form的onSubmit事件,如果是通过button的onclick事件进行表单提交则不会触发form的onSubmit事件 2. onSubmit事件的正确写法是:<form action="