效果图：

图(1)初始图

图(2)填入信息校验

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题完整验证表单/title style type=' text/CSS ' * { margin : 0；padd : 0；列表式：无；}正文{ background: # ccc}。演示{ width :400 pxpadding :40 px背景# efefeffborder : solid 1px # 666 margin 3 3360100 px自动0;线高：40 px}标签{ display : inline-block；宽度：20%;}输入{宽度：60%；}/style/head dydiv class=' demo ' ul Li label for=' ipt QQ ' Q Q:/label input type=' text ' id=' ipt QQ ' span/span/Li label for=' ipt phone '手机：/标签输入类型=' text ' id=' ipt phone ' span/span/Li Li标签为=' iptEmil '邮箱：/label输入类型=' text ' id=' ipt EML ' span/span/Li Li标签为=' iptNum '座机：/标签输入类型=' text ' id=' iptNum ' span/span/Li Li标签为='iptName '姓名：/标签输入类型=' text ' id=' ipt name ' span/span/Li/ul/div/body script type=' text/JavaScript '(函数(窗口){ function $(id){ return document。 getelementbyid(id))；};//获取对象var iptqq=$('iptqq ')、iptPhone=$('iptPhone ')、iptEmil=$('iptEmil ')、iptNum=$('iptNum ')、ipt name=$(' ipt name ')；//正则验证表达式//验证座机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=/^[emailprotected]w . w $/；//验证姓名/^[u4e00-u9fa5]{2,}$//验证座机阳离子(iptNum，rxNum)；//验证即时通信软件阳离子(iptqq、rx QQ)；//验证手机号阳离子（网络电话、接收电话);//验证邮箱阳离子(iptEmil，rxEmil)；//验证姓名阳离子(iptName，rxName)；//封装验证函数函数阳离子(元素，RegExp){元素。onbulr=function(){ var txt=this。价值；if(RegExp。test(txt)){ this。下一个元素兄弟。innerHTMl='正确这个。nextelementsibling。风格。颜色='绿色'；} else { this。nextelementsibling。innerhtml='错误这个。nextelementsibling。风格。颜色='红色'；} } } })(窗口)/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！