-
完成对注册表单的设计与验证
首先先完成页面的书写
<h6>"欢迎注册**网站"</h6>
姓名:<input type="text" name="" id="names" value="" /><br />//姓名输入框
密码:<input type="password" name="" id="passwords"><br />//密码输入框
邮箱:<input type="text" name="" id="mailbox" value="" /><br />//邮箱输入框
年龄:<input type="text" name="" id="years" value="" /><br />//年龄输入框
<input type="button" id="yz" value="验证信息">//验证信息按钮
完成上述代码后可以得到这样一个页面:
然后完成获取用户输入的信息以及完成验证:
//设置点击事件,当点击ID为"yz"的按钮时执行以下代码
document.getElementById("yz").onclick = function(){
var names = document.getElementById("names").value//获取姓名输入框信息
var q = /^[\u4e00-\u9fa5]+$/ //正则表达式
var isName = q.test(names) //判断输入数据是否符合正则表达式
var passwords = document.getElementById("passwords").value//获取密码输入框信息
var w = /^[0-9a-zA-Z_]{6,}$/ //正则表达式
var isPasswords = w.test(passwords) //判断输入数据是否符合正则表达式
var mailbox = document.getElementById("mailbox").value//获取邮箱输入框信息
var e = /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z_]+$/;
//正则表达式
var isMailbox = e.test(mailbox) //判断输入数据是否符合正则表达式
var years = document.getElementById("years").value//获取年龄输入框信息
var r = /^[0-9]{1,}$/ //正则表达式
var isYears = r.test(years) //判断输入数据是否符合正则表达式
最后使用if语句进行判断:
if (!isName) {
alert("姓名异常")
}
else if(!isPasswords) {
alert("当前密码安全性过低,请重新输入并且长度不小于6")
}
else if(!isMailbox) {
alert("邮箱格式不正确")
}
else if(!isYears) {
alert("年龄输入有误")
}else{
alert("登录成功")
}
}
完整代码:
<h6>"欢迎注册**网站"</h6>
姓名:<input type="text" name="" id="names" value="" /><br />
密码:<input type="password" name="" id="passwords"><br />
邮箱:<input type="text" name="" id="mailbox" value="" /><br />
年龄:<input type="text" name="" id="years" value="" /><br />
<input type="button" id="yz" value="验证信息">
<script type="text/javascript">
document.getElementById("yz").onclick = function() {
var names = document.getElementById("names").value
var q = /^[\u4e00-\u9fa5]{2,4}$/
var isName = q.test(names)
var passwords = document.getElementById("passwords").value
var w = /^[0-9a-zA-Z_]{6,}$/
var isPasswords = w.test(passwords)
var mailbox = document.getElementById("mailbox").value
var e = /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z_]+$/;
var isMailbox = e.test(mailbox)
var years = document.getElementById("years").value
var r = /^[0-9]{1,}$/
var isYears = r.test(years)
if (!isName) {
alert("姓名异常")
}
else if(!isPasswords) {
alert("当前密码安全性过低,请重新输入并且长度不小于6")
}
else if(!isMailbox) {
alert("邮箱格式不正确")
}
else if(!isYears) {
alert("年龄输入有误")
}else{
alert("登录成功")
}
}
</script>