html正则表达式表单验证,js正则表达式验证表单【完整版】

效果图：

图(1)初始图

图(2)填入信息校验

代码如下：

完整验证表单

*{margin: 0;padding: 0;list-style:none;}

body{background:#ccc;}

.demo{width:400px;padding:40px;background:#efefef;border:solid 1px #666;margin:100px auto 0;line-height:40px;}

label{display:inline-block;width:20%;}

input{width:60%;}

Q Q：
手机：
邮箱：
座机：
姓名：

(function(window){

function $(id){

return document.getElementById(id);

};

// 获取对象

var iptqq = $("iptqq"),iptPhone = $("iptPhone"),iptEmil = $("iptEmil"),iptNum = $("iptNum"),iptName = $("iptName");

// 正则验证表达式

// 验证座机

var rxNum = /^0[0-9]{2,3}-[0-9]{7,8}$/;

// 验证QQ

var rxqq = /^[1-9][0-9]{4,10}$/;

// 验证手机

var rxPhone = /^(13[0-9]|15[012356789]|18[0-9]|17[678]|14[57])[0-9]{8}$/;

// 验证邮箱

var rxEmil = /^\w+@\w+\.\w+$/;

// 验证姓名

var rxName = /^[\u4E00-\u9FA5]{2,}$/

// 验证座机

cation(iptNum,rxNum);

// 验证QQ

cation(iptqq,rxqq);

// 验证手机号

cation(iptPhone,rxPhone);

// 验证邮箱

cation(iptEmil,rxEmil);

// 验证姓名

cation(iptName,rxName);

// 封装验证函数

function cation(element,regExp){

element.onblur = function(){

var txt = this.value;

if( regExp.test( txt ) ){

this.nextElementSibling.innerHTML = "正确"

this.nextElementSibling.style.color = "green";

}else{

this.nextElementSibling.innerHTML = "错误"

this.nextElementSibling.style.color = "red";

}

})(window)

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

html正则表达式表单验证,js正则表达式验证表单【完整版】相关推荐

js阻止冒泡的方式-完整版
js阻止冒泡的方式-完整版直接讲结论: 1.原生js 两种方式绑定事件 onclick 和 addEventListener 阻止冒泡的唯一方式为 var e = window.event || a ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
计算机科学领域外文期刊影响因子排行,2020最新SCI影响因子出炉，中国期刊Top100榜单公布，附最全EXCEL完整版目录！...
Hello,大家好,我是伊曼! 后台有不少咨询,最新论文影响因子的, 其实前期我们介绍过一个便捷工具-IF查与投, 往期内容: 当然,为了方便大家查阅,此处对其进行重新介绍同时,对2020最新影响因子 ...
php电销源码部署,【独家分享】最新价值4800接单运营版电销语音机器人完整版源码+文字安装教程...
[独家分享]最新价值4800接单运营版[电销语音机器人]完整版源码+文字安装教程完完整整,接单运营级的东西,含非常完整的教程.搭建过程中如果有不明白的地方,可以直接联系.,或者群内喊社区大佬协助. ...
最常用的15个前端表单验证JS正则表达式
2019独角兽企业重金招聘Python工程师标准>>> 在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包 ...
html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
电话号码正则表达式代码 javascript+html,JS正则表达式判断11位手机号码
JavaScript中可以使用正则表达式var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;来判断是否为11位有效电话号码. JavaScript中可以使用正则表达式判断是否为1 ...
从js给html的form表单赋值,js获取form表单数据和form表单赋值
$.fn.extend({ // 调用方式:$("xxxxx").getform(); getform: function () { var obj = {}; var array ...
用JS制作一个信息管理平台完整版
前言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...

html正则表达式表单验证,js正则表达式验证表单【完整版】

html正则表达式表单验证,js正则表达式验证表单【完整版】相关推荐

最新文章

热门文章