怎么用html5编写用户注册验证程序

html-css022

怎么用html5编写用户注册验证程序,第1张

在表单最后放置一个button,然后在button的click事件中 通过 表单dom对象.submit()来提交表单,在提交前可以编写校验逻辑或者使用jquery validate之类的表单校验组件来校验

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<html>

<head>

<title></title>

<script>

function check(){

var username= document.getElementById("username")

var pattern=/^1[358][0123456789]\d{8}$/

if(pattern.test(username.value)){

document.getElementById("from1").submit()

} else{

alert("格式不正确")

}

}

</script>

</head>

<body>

<div>

<h1 align="center">用户注册</h1>

<form action="123.php" method="post" id="from1">

手机号:<input type="text" id=username name="username" />

密码:<input type="password" name="password1"/>

确认密码:<input type="password" name="password2"/>

<input type="button" value="注册" onclick="check()"/>

<input type="reset" value="重置" class="button"/></form>

</div>

</body>

</html>

您好!很高兴为您解答:

这个么很简单的嘛,用js检测一下就知道了,如下:

姓名:<input type="text" value=""  id="user"/><br><p>用户名不能为空</p>

密码:<input type="text" value=""  id="paw"/><br><p>密码不能为空</p>

年龄:<input type="text" value=""  id="age"/><br><p>年龄不能为空</p>

<input type="button" value="提交" id="btn"/>

<script>

var btn=document.getElementById('btn')

var user=document.getElementById('user')

var paw=document.getElementById('paw')

var age=document.getElementById('age')

var p=document.getElementsByTagName('p')

for(var i=0i<p.lengthi++){

p[i].style.display='none'

}

btn.onclick=function(){

if(user.value==''){

p[0].style.display='block'

}else{

p[0].style.display='none'

}

if(paw.value==''){

p[1].style.display='block'

}else{

p[1].style.display='none'

}

if(age.value==''){

p[2].style.display='block'

}else{

p[2].style.display='none'

}

}

</script>

望采纳