前端开发基础的表单验证简要js原生写法
摘要： 面试前端开发怎么自己介绍 面试前端开发需要问哪些问题 去小公司面试前端开发会考试吗 表单界面 html 代码 <!DOCTYPE html> <html lang=”en”> <head> &l……
| 面试前端开发怎么自己介绍 |
| 面试前端开发需要问哪些问题 |
| 去小公司面试前端开发会考试吗 |
表单界面
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style type=”text/css”>
tr > td:first-of-type {
width: 80px;
text-align: right;
}
tr > td:last-of-type {
font-size: 12px;
color: #a00;
}
#yzmPut {
cursor: pointer;
}
</style>
</head>
<body>
<form action=”finnsh.html” onsubmit=”return fn()”>
<table>
<tr>
<td>用户名：</td>
<td><input type=”text” name=”user” id=”user” /></td>
<td id=”userInfo”></td>
</tr>
<tr>
<td>密码：</td>
<td><input type=”password” name=”psd” id=”psd” /></td>
<td id=”psdInfo”></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type=”password” name=”rpsd” id=”rpsd” /></td>
<td id=”rpsdInfo”></td>
</tr>
<tr>
<td>电子邮箱：</td>
<td><input type=”text” name=”email” id=”email” /></td>
<td id=”emailInfo”></td>
</tr>
<tr>
<td>手机号码：</td>
<td><input type=”text” name=”tel” id=”tel” /></td>
<td id=”telInfo”></td>
</tr>
<tr>
<td>固定电话：</td>
<td><input type=”text” name=”gtel” id=”gtel” /></td>
<td id=”gtelInfo”></td>
</tr>
<tr>
<td>QQ号码：</td>
<td><input type=”text” name=”qq” id=”qq” /></td>
<td id=”qqInfo”></td>
</tr>
</table>
<table>
<tr>
<td>验证码：</td>
<td><input type=”text” name=”yzm” id=”yzm” /></td>
<td id=”yzmPut”></td>
<td id=”yzmInfo”></td>
</tr>
<tr>
<td></td>
<td><input type=”submit” value=”完成注册” /></td>
<td></td>
<td></td>
</tr>
</table>
</form>
<script type=”text/javascript”>
// 用户名
var oUser = document.getElementById(‘user’)
var oUserInfo = document.getElementById(‘userInfo’)
oUser.onfocus = function() {
oUserInfo.innerHTML =
‘请输入字母、数字、下划线构成，首字母不可以是数字，6-12位的用户名’
}
function userfn() {
if (oUser.value == ”) {
oUserInfo.innerHTML = ‘用户名不可以为空’
return false
}
var regex = /^[a-zA-Z_]\w{5,11}$/
if (regex.test(oUser.value) == true) {
oUserInfo.innerHTML = ‘√’
return true
} else {
oUserInfo.innerHTML =
‘必须是由字母、数字、下划线构成，首字母不可以是数字，6-12位的用户名’
return false
}
}
oUser.onblur = userfn
// 密码
var oPsd = document.getElementById(‘psd’)
var oPsdInfo = document.getElementById(‘psdInfo’)
oPsd.onfocus = function() {
oPsdInfo.innerHTML =
‘密码由字母、数字、下划线构成，6位，首字母不可以是数字’
}
function psdfn() {
if (oPsd.value == ”) {
oPsdInfo.innerHTML = ‘密码不能为空’
return false
}
var regex = /^[a-zA-Z_]\w{5}$/
if (regex.test(oPsd.value) == true) {
oPsdInfo.innerHTML = ‘√’
return true
} else {
oPsdInfo.innerHTML =
‘密码必须由字母、数字、下划线构成，6位，首字母不可以是数字’
return false
}
}
oPsd.onblur = psdfn
// 密码确认
var oRpsd = document.getElementById(‘rpsd’)
var oRpsdInfo = document.getElementById(‘rpsdInfo’)
oRpsd.onfocus = function() {
oRpsdInfo.innerHTML = ‘确认密码’
}
function rpsdfn() {
if (oRpsd.value == ”) {
oRpsdInfo.innerHTML = ‘确认密码不能为空’
return false
}
if (oRpsd.value == oPsd.value) {
oRpsdInfo.innerHTML = ‘√’
return true
} else {
oRpsdInfo.innerHTML = ‘密码输入不一致’
return false
}
}
oRpsd.onblur = rpsdfn
// 电子邮箱
var oEmail = document.getElementById(’email’)
var oEmailInfo = document.getElementById(’emailInfo’)
oEmail.onfocus = function() {
oEmailInfo.innerHTML =
‘格式为xxxxx@xxxxxx.com/cn/net/com.cn/edu/gov，首字母不可以是数字’
}
function emailfn() {
if (oEmail.value == ”) {
oEmailInfo.innerHTML = ‘邮箱不能为空’
return false
}
var regex = /^[a-zA-Z_]\w*@\w+\.(com|cn|net|com.cn|edu|gov)$/
if (regex.test(oEmail.value) == true) {
oEmailInfo.innerHTML = ‘√’
return true
} else {
oEmailInfo.innerHTML = ‘邮箱格式输入不正确’
return false
}
}
oEmail.onblur = emailfn
// 手机号
var oTel = document.getElementById(‘tel’)
var oTelInfo = document.getElementById(‘telInfo’)
oTel.onfocus = function() {
oTelInfo.innerHTML = ‘以135/137/138开头的11为纯数字’
}
function telfn() {
if (oTel.value == ”) {
oTelInfo.innerHTML = ‘手机号不能为空’
return false
}
var regex = /^1(35|37|38)\d{8}$/
if (regex.test(oTel.value) == true) {
oTelInfo.innerHTML = ‘√’
return true
} else {
oTelInfo.innerHTML = ‘手机格式输入不正确’
return false
}
}
oTel.onblur = telfn
// 固定电话
var oGtel = document.getElementById(‘gtel’)
var oGtelInfo = document.getElementById(‘gtelInfo’)
oGtel.onfocus = function() {
oGtelInfo.innerHTML =
‘020-12345678或0312-1234567，横线前最多4为最少3位，且以0开头，横线后为7或8位数字’
}
function gtelfn() {
if (oGtel.value == ”) {
oGtelInfo.innerHTML = ‘固定电话号不能为空’
return false
}
var regex = /^0\d{2,3}-\d{7,8}$/
if (regex.test(oGtel.value) == true) {
oGtelInfo.innerHTML = ‘√’
return true
} else {
oGtelInfo.innerHTML = ‘固定电话格式输入不正确’
return false
}
}
oGtel.onblur = gtelfn
// qq
var oQq = document.getElementById(‘qq’)
var oQqInfo = document.getElementById(‘qqInfo’)
oQq.onfocus = function() {
oQqInfo.innerHTML = ‘QQ号5位以上’
}
function qqfn() {
if (oQq.value == ”) {
oQqInfo.innerHTML = ‘QQ号不能为空’
return false
}
var regex = /^\d{5,}$/
if (regex.test(oQq.value) == true) {
oQqInfo.innerHTML = ‘√’
return true
} else {
oQqInfo.innerHTML = ‘QQ号格式输入不正确’
return false
}
}
oQq.onblur = qqfn
// 验证码
var yzm = document.getElementById(‘yzm’)
var yzmPut = document.getElementById(‘yzmPut’)
var yzmInfo = document.getElementById(‘yzmInfo’)
function yzmputfn() {
var str = ‘abcdefghijklmnopqrstuvwxyz0123456789’
var newstr = ”
for (var i = 0; i < 5; i++) {
var index = parseInt(Math.random() * str.length)
newstr += str[index]
}
yzmPut.innerHTML = newstr
}
window.onload = yzmputfn
yzmPut.onclick = yzmputfn
function yzmfn() {
if (yzm.value == ”) {
yzmInfo.innerHTML = ‘验证码不能为空’
return false
}
if (yzm.value == yzmPut.innerHTML) {
yzmInfo.innerHTML = ‘√’
return true
} else {
yzmInfo.innerHTML = ‘验证码不正确’
return false
}
}
yzm.onblur = yzmfn
yzm.onfocus = function() {
// yzmInfo.innerHTML = “请输入验证码”;
if (yzmInfo.innerHTML == ‘验证码不正确’) {
yzmputfn()
yzmInfo.innerHTML = ”
yzm.value = ”
} else if (yzmInfo.innerHTML == ”) {
yzmInfo.innerHTML = ‘请输入验证码’
}
}
// 判断跳转条件
function fn() {
var res1 = userfn()
var res2 = psdfn()
var res3 = rpsdfn()
var res4 = emailfn()
var res5 = telfn()
var res6 = gtelfn()
var res7 = qqfn()
var res8 = yzmfn()
return (
res1 && res2 && res3 && res4 && res5 && res6 && res7 && res8
)
}
</script>
</body>
</html>
跳转界面，当表单验证完成后会跳转到该页面
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
h1 {
margin-top: 100px;
text-align: center;
}
</style>
</head>
<body>
<h1>注册成功!!!</h1>
</body>
</html>
| 魅族前端开发面试经验 |
| 前端开发面试笔试题目 |
| 应届生前端开发面试自我介绍 |
» 本文来自：前端开发者 » 《前端开发基础的表单验证简要js原生写法》
» 本文链接地址：https://www.rokub.com/7974.html
» 您也可以订阅本站：https://www.rokub.com
近期评论