前端开发：表单开发验证
摘要：python前端开发教程|前端与移动开发就业|web前端开发入门教程 html 代码 <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title&……
python前端开发教程|前端与移动开发就业|web前端开发入门教程
html 代码
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>表单验证</title>
<style>
* {
margin: 0;
padding: 0;
font: 12px/1.5 “宋体”, “Arial”, “sans-serif”, “Tahoma”;
color: #ccc;
}
input,
img,
label {
vertical-align: middle;
}
form {
width: 740px;
height: 500px;
margin: 100px auto;
}
form div {
overflow: hidden;
clear: both;
}
form div label {
float: left;
clear: both;
}
form div label .text {
width: 152px;
height: 26px;
padding: 0 2px;
border: 1px solid #ccc;
}
form div label b {
font-size: 12px;
color: #ccc;
visibility: hidden;
}
form div em {
display: inline-block;
font-size: 12px;
text-align: center;
color: #fff;
vertical-align: middle;
width: 53px;
height: 15px;
line-height: 15px;
background-color: #FFD009;
}
form div .active {
background-color: #F60;
}
div span {
display: inline-block;
width: 80px;
text-align: right;
}
.submitBtn {
width: 135px;
height: 33px;
color: #ccc visibility: #fff;
margin: 20px 0 0 80px;
}
.changeImg {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
}
.msg {
line-height: 12px;
color: #999 margin-left: 5px;
display: none;
}
.msg i {
display: inline-block;
vertical-align: middle;
width: 25px;
height: 20px;
}
.msg .ati {
background-position: 0 -71px;
}
.msg .err {
background-position: 0 -39px;
}
.msg .ok {
background-position: 0 -99px;
}
</style>
</head>
<body>
<form action=””>
<div>
<label>
<span>
会员名:
</span>
<input type=”text” class=”text” />
</label>
<p class=”msg”>
<i class=”ati”></i>
5-25个字符，一个汉字为两个字符，推荐使用中文会员名
</p>
</div>
<div>
<label>
<span></span>
<b id=”count”>0个字符</b>
</label>
</div>
<div>
<label>
<span>登录密码：</span>
<input type=”password” class=”text” />
</label>
<p class=”msg”>
<i class=”err”></i>
5-25个字符，一个汉字为两个字符，推荐使用中文会员名
</p>
</div>
<div style=”margin: 3px 0 10px 0″>
<label>
<span></span>
<em class=”active”>弱</em>
<em>中</em>
<em>强</em>
</label>
</div>
<div style=”margin-bottom: 20px”>
<label>
<span>
确认密码：
</span>
<input type=”password” class=”text” disabled=”” />
</label>
<p class=”msg”>
<i class=”ati”></i>
请在输入一次
</p>
</div>
<div>
<label>
<span>
验证码：
</span>
<input type=”text” class=”text” style=”width: 50px” />
<img src=”” alt=”” width=”100″ height=”30″ />
<a href=”javascript:;” class=”changeimg” title=”重新获取验证码”></a>
</label>
</div>
<div>
<input type=”submit” class=”submitBtn btn” value=”同意协议并注册” />
</div>
</form>
<script>
function getLength(str) {//输入字符的长度
return str.replace(/[^\x00-\xff]/g, ‘xx’).length;
}
//判断字符是否相等
function findStr(str, n) {
var tmp = 0;
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == n) {
tmp++
}
}
return tmp;
}
window.onload = function () {
//取标签
var oInput = document.getElementsByTagName(“input”);
var oName = oInput[0];
var pwd = oInput[1];
var pwd2 = oInput[2];
var oP = document.getElementsByTagName(“p”);
var name_msg = oP[0];
var pwd_msg = oP[1];
var pwd2_msg = oP[2];
var count = document.getElementById(“count”);
var oEm = document.getElementsByTagName(“em”);
var name_length = 0;
//用户名的匹配
// 1.数字、字母、(不区分大小写)、汉字、下划线
// 2.5-25个字符，推荐使用中文会员名
//a-zA-Z用\w
var re = /[^\w\u4e00-\u9fa5]/g;//匹配所以非法字符
//添加事件 用户名
oName.onfocus = function () {//用户获得焦点时
name_msg.style.display = “block”;
name_msg.innerHTML = “<i class=’ati’></i>5-25个字符，一个汉字为2个字符，推荐使用中文会员名。”
if (name_length == 0) {
count.style.visibility = “hidden”;
}
};
oName.onkeyup = function () {//用户输入时
count.style.visibility = “visible”;
name_length = getLength(this.value);
count.innerHTML = name_length + “个字符”
};
oName.onblur = function () {//用户离开时
var re = /[^\w\u4e00-\u9fa5]/g;//匹配所以非法字符
if (re.test(this.value)) {
name_msg.innerHTML = “<i class=’err’></i>含有非法字符”
}
else if (this.value == “”) {
name_msg.innerHTML = “<i class=’err’></i>不能为空”
}
else if (name_length > 25) {
name_msg.innerHTML = “<i class=’err’></i>长度不能超过25个字符”
}
else if (name_length < 6) {
name_msg.innerHTML = “<i class=’err’></i>长度不能少于6个字符”
}
else {
name_msg.innerHTML = “<i class=’ok’></i>ok”
}
};
//密码
pwd.onfocus = function () {
pwd_msg.style.display = “block”;
pwd_msg.innerHTML = “<i class=’ati’></i>6-16个字符,请使用字母加数字或符号的组合密码，不能单独使用字母、数字或符号。”
};
pwd.onkeyup = function () {
if (this.value.length > 5) {//当长度大于5时激活active
oEm[1].className = “active”;
pwd2.removeAttribute(“disabled”);//去掉禁用属性
pwd2_msg.style.display = “block”;//显示后面的文字
}
else {//但删除密码长度时的动作
oEm[1].className = “”;
pwd2.setAttribute(“disabled”);//添加禁用属性
pwd2_msg.style.display = “none”;//隐藏后面的文字
}
//密码长度大于10
if (this.value.length > 10) {//当长度大于5时激活active
oEm[2].className = “active”;
} else {//但删除密码长度时的动作
oEm[2].className = “”;
}
};
pwd.onblur = function () {
var m = findStr(pwd.value, pwd.value[0]);
var re_n = /[^\d]/g;//非数字
var re_t = /[^a-zA-z]/g;
//不能为空
if (this.value == “”) {
pwd_msg.innerHTML = “<i class=’err’></i>不能为空!”
}
//不能有相同字符
else if (m == this.value.length) {
pwd_msg.innerHTML = “<i class=’err’></i>不能用相同字符!”
}
//长度为6-16
else if (this.value.length < 6 || this.value.length > 16) {
pwd_msg.innerHTML = “<i class=’err’></i>长度应为6-16个字符!”
}
//不能全为数字
else if (!re_n.test(this.value)) {
pwd_msg.innerHTML = “<i class=’err’></i>不能全为数字!”
}
//不能全为字母
else if (!re_t.test(this.value)) {
pwd_msg.innerHTML = “<i class=’err’></i>不能全为字母!”
}
//0k
else {
pwd_msg.innerHTML = “<i class=’ok’></i>ok”
}
};
//确认密码
pwd2.onfocus = function () {//获得焦点
if (this.value != pwd.value) {
pwd2_msg.innerHTML = “<i class=’err’></i>两次输入的密码不一致!”
} else {
pwd2_msg.innerHTML = “<i class=’ok’></i>ok”
}
};
}
</script>
</body>
</html>
前端开发新框架|移动端前端开发的理解|初级前端开发教程
» 本文来自：前端开发者 » 《前端开发：表单开发验证》
» 本文链接地址：https://www.rokub.com/5175.html
» 您也可以订阅本站：https://www.rokub.com
近期评论