表单验证

最新推荐文章于 2024-08-02 00:06:19 发布

Xin_zang

最新推荐文章于 2024-08-02 00:06:19 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/Xin_zang/article/details/79063670

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>

//判断空
function kong(id12){
var name = $("#"+id12).val();
if(name != null && name != ""){

return true;
}else{
return false;
}
}

//账号

function zhanghao(){
var zh = $("#id1").val();
if(kong("id1")){
var v = /^[A-Za-z0-9]+$/;

if(v.test(zh)){
$("#id1_msg").html("<font color='green'>√</font>");
}else{
$("#id1_msg").html("<font color='red'>不能有特殊符号</font>");
}

}else{
$("#id1_msg").html("<font color='red'>不能为空</font>");
}

}

//密码：
function mima(){

var mm = $("#id2").val();

if(kong("id2")){

var v = /^[A-Z][a-z0-9]+$/;

if(v.test(mm) && mm.length>=6){
$("#id2_msg").html("<font color='green'>√</font>");
}else{
$("#id2_msg").html("<font color='red'>首字母大写 --- 大于6位</font>");
}

}else{
$("#id2_msg").html("<font color='red'>不能为空</font>");
}

}

//确认密码
function querenmima(){

var mm = $("#id2").val();
var qrmm = $("#id3").val();

if(kong("id3")){

if(qrmm==mm){
$("#id3_msg").html("<font color='green'>√</font>");
}else{
$("#id3_msg").html("<font color='red'>与密码必须一致</font>");
}

}else{
$("#id3_msg").html("<font color='red'>不能为空</font>");
}
}

//昵称

function nicheng(){

var nc = $("#id4").val();

if(kong("id4")){

if(nc == "我是昵称1" || nc == "我是昵称2"){
$("#id4_msg").html("<font color='red'>重复</font>");
}else{
$("#id4_msg").html("<font color='green'>√</font>");
}
}else{
$("#id4_msg").html("<font color='red'>不能为空</font>");
}
}

//出生日期

function chusheng(){
}

//身份证号

function shenfenzheng(){
var sfz = $("#id7").val();
if(kong("id7")){

if(sfz.length == 18){
$("#id7_msg").html("<font color='green'>√</font>");
}else{
$("#id7_msg").html("<font color='red'>长度为18位</font>");
}

}else{
$("#id7_msg").html("<font color='red'>不能为空</font>");
}
}

//手机号

function sjh(){

var sj1 = $("#id8").val();
var v = /^1[3568]{1}\d{9}$/;

if(kong("id8")){
if(v.test(sj1)){
$("#id8_msg").html("<font color='green'>√</font>");
}else{
$("#id8_msg").html("<font color='red'>1开头 --- 长度为11位</font>");
}
}else{
$("#id8_msg").html("<font color='red'>不能为空</font>");
}

}

//QQ

function txqq(){

var qq1 = $("#id9").val();

if(kong("id9")){

if(qq1.length >= 5 ){
$("#id9_msg").html("<font color='green'>√</font>");
}else{
$("#id9_msg").html("<font color='red'>QQ为5位数以上</font>");
}

}else{
$("#id9_msg").html("<font color='red'>不能为空</font>");
}
}
//邮箱

function youxiang(){

var you = $("#id10").val();
var v = /^\w+@(.com)+$/

if(kong("id10")){

if(v.test(you)){
$("#id10_msg").html("<font color='green'>√</font>");
}else{
$("#id10_msg").html("<font color='red'>邮箱格式有误</font>");
}

}else{
$("#id10_msg").html("<font color='red'>不能为空</font>");
}

}

</script>
</head>
<body>
<center>
<form>
账号：<input type="text" id="id1" οnblur="zhanghao()"/>
<span id="id1_msg"></span>
<br />
密码：<input type="password" id="id2" οnblur="mima()" />
<span id="id2_msg"></span>
<br />
重复密码：<input type="password" id="id3" οnblur="querenmima()" />
<span id="id3_msg"></span>
<br />
昵称：<input type="text" id="id4" οnblur="nicheng()"/>
<span id="id4_msg"></span>
<br />
出生日期：<input type="date" id="id5" οnblur="chusheng()" />
<span id="id5_msg"></span>
<br />
性别：
<input type="radio" id="id6_1" name="s" checked="checked" />汉子
<input type="radio" id="id6_2" name="s" />妹子
<br />
身份证号：<input type="text" id="id7" οnblur="shenfenzheng()"/>
<span id="id7_msg"></span>
<br />
手机号：<input type="tel" id="id8" οnblur="sjh()" />
<span id="id8_msg"></span>
<br />
QQ:<input type="text" id="id9" οnblur="txqq()"/>
<span id="id9_msg"></span>
<br />
邮箱：<input type="email" id="id10" οnblur="youxiang()" />
<span id="id10_msg"></span>
</form>
</center>
</body>
</html>