前端简单的表单验证
摘要： 前端开发代码规范文档 前端代码开发 前端开发代码规范 html 代码片段 <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″ ……
| 前端开发代码规范文档 |
| 前端代码开发 |
| 前端开发代码规范 |
html 代码片段
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″ />
<title>jquery-表单验证</title>
<style>
body {
position: absolute;
top: 25%;
left: 33%;
}
table {
color: #666;
}
table tr {
height: 50px;
}
.state1 {
color: #aaa;
}
.state2 {
color: #00b0ff;
}
.state3 {
color: #eb4f38;
}
.state4 {
color: #00b694;
}
input[type=’submit’] {
width: 80px;
height: 30px;
font-weight: bold;
border-radius: 15px;
background-color: #3cbab7;
color: #fff;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td>用 户 名：</td>
<td><input type=”text” name=”username” /></td>
<td><span class=”state1″>请输入用户名</span></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type=”password” name=”password” /></td>
<td><span class=”state1″>请输入密码</span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type=”password” name=”repassword” /></td>
<td><span class=”state1″>请输入确认密码</span></td>
</tr>
<tr>
<td>邮 箱：</td>
<td><input type=”email” name=”email” /></td>
<td><span class=”state1″>请输入邮箱</span></td>
</tr>
<tr>
<td></td>
<td><input type=”submit” value=”提 交” /></td>
<td></td>
</tr>
</table>
</form>
</body>
<script>
$(function() {
var username = false
var password = false
var repassword = false
var email = false
// username
$(‘input[name=”username”]’)
.focus(function() {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘用户名应该在6-20位之间!’)
.removeClass(‘state1 state4 state3’)
.addClass(‘state2’)
})
.blur(function() {
var len = $(this).val().length
if (len >= 6 && len <= 20 && $(this).val() != ”) {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘用户名输入正确!’)
.removeClass(‘state1 state4 state3’)
.addClass(‘state4’)
username = true
} else {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘用户名输入错误,应在6-20位之间!’)
.removeClass(‘state1 state2 state4’)
.addClass(‘state3’)
}
})
// password
$(‘input[name=”password”]’)
.focus(function() {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘密码6-20位字符,字母开头,只包含字母数字下划线!’)
.removeClass()
.addClass(‘state2’)
})
.blur(function() {
var reg = /^[a-z | A-Z]\w{5,19}$/
if (reg.test($(this).val())) {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘密码输入正确!’)
.removeClass()
.addClass(‘state4’)
password = true
} else {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘密码输入错误,请重新输入!’)
.removeClass()
.addClass(‘state3’)
}
})
// repassword
$(‘input[name=”repassword”]’)
.focus(function() {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘请输入确认密码!’)
.removeClass()
.addClass(‘state2’)
})
.blur(function() {
var reg = /^[a-z | A-Z]\w{5,19}$/
if (
reg.test($(this).val()) &&
$(this).val() == $(‘input[name=”password”]’).val()
) {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘确认密码输入正确!’)
.removeClass()
.addClass(‘state4’)
repassword = true
} else {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘两次输入不一致!’)
.removeClass()
.addClass(‘state3’)
}
})
// email
$(‘input[name=”email”]’)
.focus(function() {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘请输入正确的EMAIL格式!’)
.removeClass()
.addClass(‘state2’)
})
.blur(function() {
var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/
if (reg.test($(this).val())) {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘邮箱输入正确!’)
.removeClass()
.addClass(‘state4’)
email = true
} else {
$(this)
.parent()
.siblings()
.find(‘span’)
.text(‘邮箱输入错误，请输入重新输入!’)
.removeClass()
.addClass(‘state3’)
}
})
// 提交
$(‘input[type=”submit”]’).click(function() {
if (username && password && repassword && email) {
$(‘form’).submit()
} else {
return alert(‘您未填写齐全，或填写格式错误!’)
}
})
})
</script>
</html>
addClass():
描述: 为每个匹配的元素添加指定的样式类名
.addClass( className ),className为一个String字符串，为指定元素添加这个classname的类
.addClass( function(index, currentClass) )，这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。
removeClass():
描述: 移除集合中每个匹配元素上一个，多个或全部样式。
.removeClass( [className ] )，每个匹配元素移除的一个或多个用空格隔开的样式名。
.removeClass( function(index, class) )，这个函数，返回一个或多个将要被移除的样式名。index 参数表示在所有匹配元素的集合中当前元素的索引位置。class 参数表示原有的样式名。
| web前端开发代码资源 |
| web前端开发标准源代码 |
| web前端开发代码规范 |
» 本文来自：前端开发者 » 《前端简单的表单验证》
» 本文链接地址：https://www.rokub.com/6391.html
» 您也可以订阅本站：https://www.rokub.com
近期评论