js实现表单验证-完整代码

一、页面展示

二、全部代码

页面代码

<body><div id="container"><!--主体开始 --><div id="register"><form onsubmit="return check()" action="register_success.html"><fieldset><legend>新用户注册</legend><p><label>用户名：</label><input name="" type="text" id="txtName" class="txt" onblur="checkName()" /><span id="span_name">由英文字母和数字组成的4-16位字符，以字母开头</span></p><p><label>密码：</label><input name="" type="password" id="txtPwd" class="txt" onblur="checkPwd()" /><span id="span_pwd">由英文字母和数字组成的4—10位字符。</span></p><p><label>确认密码：</label><input name="" type="password" id="txtConfirmPwd" class="txt" onblur="checkPwd2()" /><span id="span_confirmPwd"></span></p><p><label>电子邮箱：</label><input name="" type="text" id="txtEmail" class="txt" onblur="checkEmail()" /><span id="span_email">邮箱账号@域名,如：good@tom.com</span></p><p><label>手机号码：</label><input name="" type="text" id="txtPhone" class="txt" onblur="checkNum()" /><span id="span_phone">手机号由11位数字组成，且以13、15、18开头</span></p><p><label>出生日期：</label><input name="" type="text" id="txtBornDate" class="txt" onblur="checkBirthday()" /><span id="span_Born">出生日期在1900~2009之间，如：1985-3-1或1985-03-01</span></p><p><label>所在城市：</label><select id="selProvince" required><option value="">请先选择城市</option><option value="0">湖南省</option><option value="1">湖北省</option><option value="2">浙江省</option></select><select id="selCity" required></select></p><p><input type="submit" value="提交" class="btn" /></p></fieldset></form></div>

css代码 -- 外部css

@charset "utf-8";   /* 编码格式 utf-8*//*表单*/
#register{height:450px;margin-top:20px;border:0px solid red;
}div#register fieldset {border: 1px solid #039;width: 700px;padding: 20px;margin:0px auto;
}div#register fieldset legend {margin-left: 20px;font-weight:bold;color:#039;
}div#register p{font-size:14px;margin-top:20px;
}div#register label {width: 100px;display: block;float: left;text-align: right;
}div#register .txt {border: 1px solid #ccc;width: 130px;height:18px;
}div#register span {color: #999;
}
.wrong{color:red;
}
p .btn{width:80px;height:30px;background-color:#039;text-align:center;margin-left:50px;color:#fff;border:0;
}
p .btn:hover{background-color:#d73b25;
}/*版权*/
#footer{height:100px;border:0px solid green;background-color:#039;
}#footer p{color: #ffffff;font-size: 12px;text-align: center;line-height: 20px;padding-top:30px;
}

js代码这个写在 body 里面即可最下面

<script>
let $secondLi = $('.secondLi')$secondLi.hover(function () {$(this).children("ul").stop().slideDown(1000)},function () {$(this).children("ul").stop().slideUp(1000)})// 城市let arr = new Array();arr['0'] = ['长沙市', '株洲市', '湘潭市'];arr['1'] = ['武汉市', '黄岗市', '汉口市', '荆门市', '孝感市'];arr['2'] = ['杭州市', '台州市', '临安市', '宁波市'];$('#selProvince').change(function () {//获取到城市的下拉列表框let $city = $('#selCity');//先去清空原有的列表内容$city.html('')let arrList = arr[$(this).val()];let str = ''for (var i = 0; i < arrList.length; i++) {str += '<option value=' + arrList[i] + '>' + arrList[i] + '</option>';}$city.html(str);});</<script>

引用外部 js 文件

function  checkName() {  //验证用户名let userName=document.getElementById("txtName").valuelet name_prompt=document.getElementById("span_name")let nameReg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/if(!nameReg.test(userName)){name_prompt.style.background=''name_prompt.style.color='red'name_prompt.innerHTML="错误，用户名应由英文字母和数字组成的4-16位字符，以字母开头"return false}else{name_prompt.style.background='url(./images/li_ok.gif) no-repeat'name_prompt.style.color='transparent'return true}
}function checkEmail(){   //验证邮箱let txtemail =document.getElementById("txtEmail").valuelet span_email =document.getElementById("span_email")let emailReg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/if(!emailReg.test(txtemail)){span_email.style.color='red'span_email.style.background=''span_email.innerHTML='错误，邮箱格式不对'return false}else{span_email.style.background='url(./images/li_ok.gif) no-repeat'span_email.style.color='transparent'return true}
}function checkPwd(){  //验证密码let txtPwd=document.getElementById("txtPwd").value;let span_pwd=document.getElementById("span_pwd");let pwdReg=/[A-z0-9]{4,10}/;if(!pwdReg.test(txtPwd)){span_pwd.style.background=''span_pwd.style.color='red'span_pwd.innerHTML='错误，密码不对'return false}else{span_pwd.style.background='url(./images/li_ok.gif) no-repeat'span_pwd.style.color='transparent'return true}
}
function checkPwd2(){let txtPwd=document.getElementById("txtPwd").valuelet txtPwd2=document.getElementById("txtConfirmPwd").valuelet  span_pwd2=document.getElementById("span_confirmPwd")if(txtPwd2!=txtPwd){span_pwd2.style.color='red'span_pwd2.style.background=''span_pwd2.innerHTML="错误,密码与上一个不同"return false}else{span_pwd2.style.background='url(./images/li_ok.gif) no-repeat'span_pwd2.style.color='transparent'return true}
}function checkNum(){let txtNum=document.getElementById('txtPhone').valuelet  span_Num=document.getElementById("span_phone")let numReg=/^1[358][0-9]{9}/if(!numReg.test(txtNum)){span_Num.style.background=''span_Num.innerHTML="错误，手机号码格式不对"span_Num.style.color='red'return false}else{span_Num.style.background='url(./images/li_ok.gif) no-repeat'span_Num.style.color='transparent'return true
}
}
function checkBirthday(){let txtBirthday =document.getElementById('txtBornDate').valuelet span_Birthday=document.getElementById('span_Born')let BirthdayReg=/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/if(!BirthdayReg.test(txtBirthday)){span_Birthday.style.background=''span_Birthday.style.color='red'span_Birthday.innerHTML="错误，出生日期在1900-2009之间:如:1985-3-1或1985-03-01"return false}else{span_Birthday.style.background='url(./images/li_ok.gif) no-repeat'span_Birthday.style.color='transparent'return true;}
}
function check(){if(checkName()&&checkNick()&&checkEmail()&&checkPwd()&&checkPwd2()&&checkNum()&&checkBirthday()){return true}else{return false}
}

js实现表单验证-完整代码相关推荐

html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
常用正则表达式,常用表单验证javascript代码
常用正则表达式,常用表单验证javascript代码 function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0 ...
【卡法常用 ckl.js 库】： js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度...
[卡法常用js库]: js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度 // +---------------------- ...
js表单验证控制代码大全
内容: 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单: 目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.: ...
常用正则表达式,常用表单验证javascript代码(转)
function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0-9]{9}$/g)) return true; / ...
JS通用表单验证函数
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素 ...

js实现表单验证-完整代码

一、页面展示

二、全部代码

js实现表单验证-完整代码相关推荐

最新文章

热门文章