<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
*{margin:0;padding:0;}
a{text-decoration:none;}
i{font-weight:bold;font-style:normal;}
.blue{color:#4095ce;}
.red{color:#f00;}
.w100{width:100px;}
.w190{width:190px;}
.w250{width:250px;}
.w355{width:355px;}
.form_main{
padding:10px;
margin:50px auto;
width:630px;
height:auto;
border:1px solid #f4f4f4;
overflow:hidden;
}
.row{
padding:15px 0;
border-bottom:1px solid #f4f4f4;
}
.row input[type=text]:focus,.row input[type=password]:focus{
border:1px solid #ffd020;
outline:none;
width:250px;
}
.row select:focus{
border:1px solid #ffd020;
outline:none;
}
.row label{
display:inline-block;
padding-right:10px;
text-align:right;
vertical-align:middle;
}
.row .input_type{
display:inline-block;
padding:10px 5px;
vertical-align:middle;
border:1px solid #abadb3;
-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
transition:border .2s linear .1s,width .2s linear .1s;
}
.row .input_type.cor{
border:1px solid #a6ce38;
}
.row .input_type.err{
border:1px solid #f00;
}
.row .radio_type{
display:inline-block;
margin-right:5px;
vertical-align:middle;
}
.row .select_type{
vertical-align:middle;
transition:border .2s linear .1s,width .2s linear .1s;
}
.row .select_type.cor{
border:1px solid #f00;
}
.row .select_type.err{
border:1px solid #f00;
}
.row .checkbox_type{
vertical-align:middle;
}
.row .textarea_type{
position:relative;
padding:5px 0;
height:100px;
display:inline-block;
vertical-align:middle;
border:1px solid #abadb3;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
}
.row .intextarea{
display:inline-block;
float:left;
margin-left:7px;
padding:5px;
width:330px;
height:70px;
text-indent:20px;
line-height:20px;
text-align:justify;
border:0;
resize:none;
outline:none;
overflow-y:hidden;
overflow:hidden;
}
.row .textarea_type:hover{
border:1px solid #ffd020;
}
.row .word_msg{
position:absolute;
right:5px;
bottom:3px;
font-size:13px;
color:#999;
}
.row .argee_text{
font-size:14px;
color:#999;
}
.row .regBtn{
width:120px;
height:40px;
line-height:40px;
font-size:16px;
font-family:'Microsoft YaHei';
text-align:center;
border-radius:5px;
color:#a33300;
background:#ffd020;
background:-webkit-linear-gradient(top,#ffd020,#ffc313);
border:1px solid #e79f14;
cursor:pointer;
}
.row .regBtn:hover{
background:#ffda59;
background:-webkit-linear-gradient(top,#ffda59,#ffc806);
}
.row .regBtn:active {
border:1px solid #e79f14;
color:#e44700;
background:#ffd020;
}
.row span{
display:inline-block;
margin-left:10px;
vertical-align:middle;
font-size:12px;
color:#4095ce;
}
.row span.err{
color:#f00;
}
.row span.cor{
color:#a6ce38;
}
</style>
</head>
<body>
<div class="form_main">
<form action="http://www.baidu.com" method="post" id="form" target="_blank">
<div class="row">
<label for="username" class="w100">用户名</label>
<input type="text" class="input_type w190" id="username" must="true" />
</div>
<div class="row">
<label for="password" class="w100">密码</label>
<input type="password" class="input_type w190" id="password" must="true" />
</div>
<div class="row">
<label for="repassword" class="w100">确认密码</label>
<input type="password" class="input_type w190" id="repassword" must="true" />
</div>
<div class="row">
<label for="email" class="w100">电子邮箱</label>
<input type="text" class="input_type w250" id="email" must="true" />
</div>
<div class="row">
<label for="info" class="w100">个人简介</label><span class="w355 textarea_type" id="textarea_type">
<textarea id="info" class="intextarea" autocomplete="off" must="true" ></textarea>
<div class="word_msg" id="word_msg">还可以输入<i>100</i>字</div>
</span>
</div>
<div class="row">
<label for="" class="w100">性别</label>
<input type="radio" class="radio_type" id="man" name="sex" checked="checked" /><label for="man">男</label>
<input type="radio" class="radio_type" id="woman" name="sex" /><label for="woman">女</label>
</div>
<div class="row">
<label for="job" class="w100">职业</label>
<select class="select_type" id="job" must="true">
<option value="0" selected="selected">选择职业</option>
<option value="1">平面设计师</option>
<option value="2">绘画/插画师</option>
<option value="3">三维/动画师</option>
<option value="4">网页设计师</option>
<option value="5">网页制作</option>
<option value="6">GUI设计师</option>
<option value="7">Flash动画师</option>
<option value="8">产品设计师</option>
</select>
</div>
<div class="row" style="display:none;">
<label>现居</label>
<select class="select_type">
<option value="0" selected="selected">选择省份</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
<option value="4">重庆</option>
<option value="5">黑龙江</option>
<option value="6">辽宁</option>
<option value="7">吉林</option>
<option value="8">河北</option>
<option value="9">内蒙古</option>
<option value="10">陕西</option>
<option value="11">山西</option>
<option value="12">甘肃</option>
<option value="13">宁夏</option>
<option value="14">新疆</option>
<option value="15">西藏</option>
<option value="16">青海</option>
<option value="17">四川</option>
<option value="18">云南</option>
<option value="19">贵州</option>
<option value="20">湖南</option>
<option value="21">湖北</option>
<option value="22">河南</option>
<option value="23">山东</option>
<option value="24">安徽</option>
<option value="25">江苏</option>
<option value="26">浙江</option>
<option value="27">台湾</option>
<option value="28">香港</option>
<option value="29">澳门</option>
<option value="30">广东</option>
<option value="31">广西</option>
<option value="32">江西</option>
<option value="33">福建</option>
<option value="34">海南</option>
<option value="35">其它</option>
<option value="36">美国</option>
<option value="37">欧洲</option>
<option value="38">日本</option>
<option value="39">韩国</option>
<option value="40">新加坡</option>
<option value="41">加拿大</option>
<option value="42">亚 洲</option>
<option value="43">非 洲</option>
<option value="44">澳 洲</option>
<option value="45">南美洲</option>
<option value="46">东南亚</option>
</select>
</div>
<div class="row">
<label class="w100"></label>
<input type="checkbox" name="checkbox" class="checkbox_type" id="agree_checkbox" must="true" />
<label class="argee_text" for="agree_checkbox">我已阅读并接受 <a href="" class="blue">版权声明</a> 和 <a href="" class="blue">隐私保护</a> 条款</label>
</div>
<div class="row">
<label class="w100"></label>
<input type="submit" value="免费注册" class="regBtn" id="regBtn" />
</div>
</form>
</div>
<script>
window.onload = function () {
var oForm = document.getElementById('form'),
inputText1 = document.getElementById('username'),
passwordID = document.getElementById('password'),
repasswordID = document.getElementById('repassword'),
emailID = document.getElementById('email'),
selectID = document.getElementById('job'),
oAgree_checkbox = document.getElementById('agree_checkbox'),
oTextarea_box = document.getElementById('textarea_type'),
oInfo = document.getElementById('info'),
oWord_msg = document.getElementById('word_msg');
/*
调用方法：
HTML： <input type="" must="true" /> 加了must="true"为需要验证的项
JS：
var checkForm = new Check_form();
checkForm.init({
formID: formID, //表单的id（必填）
text_msg: [], //验证信息提示，（必填）， 例：text_msg: ['4-16个字符，字母/中文/数字/下划线。', '4-16个字符，区分大小写。']
err_text: [], //验证错误时的信息提示（必填）， 例：text_msg: ['您输入的用户名不符合要求，请检查。', '密码不能为空请重新输入。']
cor_text: [], //验证正确时的信息提示（必填）， 例：text_msg: ['输入正确。', '输入正确。']
check_arr:[], //验证方法（顺序书写）
btnFn:function(){}, //扩展添加新的验证数据
});
*/
var f1 = new Check_form();
f1.init({
formID: oForm,//表单ID
text_msg: ['4-16个字符，字母/中文/数字/下划线。', '4-16个字符，区分大小写。', '请再次输入密码，区分大小写。', '请输入有效的邮箱地址。', '', '您的职业是？', ''],
err_text: ['您输入的用户名不符合要求，请检查。', '密码不能为空请重新输入。', '两次密码不一致，请重新输入。', '您输入的邮箱不符合要求，请检查。', '已超出字符限制。', '您的职业还没选择哦~', '您还没接受条款哦~'],
cor_text: ['可用的用户名。', '输入正确。', '输入正确。', '输入正确。', ' COOL！', 'COOL！', '您已接受条款'],
checkArr: [ //验证方法（按顺序书写）
check_inputText1 = function () {
if (inputText1.value == '' || inputText1.value.length >= 17) {
return false;
}
else {
return true;
}
},
check_pass = function () {
if (passwordID.value == '' || passwordID.value.length >= 17) {
return false;
}
else {
return true;
}
},
check_repass = function () {
if (repasswordID.value != passwordID.value || repasswordID.value == '') {
return false;
}
else {
return true;
}
},
check_email = function () {
var re = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (re.test(emailID.value) != true) {
return false;
}
else {
return true;
}
},
check_word = function () {
if (stringSize(oInfo.value) > 100) {
return false;
}
else {
return true;
}
function stringSize(s) {
return s.length + (s.match(/[^\x00-\xff]/g) || '').length;
}
},
check_select1 = function () {
if (selectID.value == 0) {
return false;
}
else {
return true;
}
},
check_agreeTk = function () {
if (oAgree_checkbox.checked) {
return true;
}
else {
return false;
}
}
],
checkWord: {//textarea字符验证
textareaID: oInfo,
wordID: oWord_msg,
maxNum: 100
}
/*btnFn: function () {//函数只能返回true/false
f1.createErrOrCor(selectID, 4);
f1.createErrOrCor(oAgree_checkbox, 5);
f1.createErrOrCor(oTextarea_box, 6);
var cSelect = (function () {
if (selectID.value) {
return true;
}
else {
return false;
}
})();
var cTk = (function () {
if (oAgree_checkbox.checked) {
return true;
}
else {
return false;
}
})();
return cSelect && cTk;
}*/
});
f1.word_dal();
};
/*****************************************************************************************************/
function Check_form() { };
Check_form.prototype = {
init: function (opt) {
this.formID = opt.formID;
this.text_msg = opt.text_msg;
this.err_text = opt.err_text;
this.cor_text = opt.cor_text;
this.checkArr = opt.checkArr;
this.checkWord = opt.checkWord;
this.startCheck();
this.btnClick(opt.btnFn);
},
startCheck: function () {//开始验证
var _this = this;
this.aInput = this.formID.getElementsByTagName('input');
this.aSelect = this.formID.getElementsByTagName('select');
this.aTextarea = this.formID.getElementsByTagName('textarea');
this.screen(
function (thisCheck, Index) {//给需要验证的项绑定事件
_this.onFocus(thisCheck, Index);
_this.onBlurs(thisCheck, Index);
}
);
},
screen: function (Fn) {//筛选出需要验证的项
var _this = this;
var num = 0;
var t = 0;
this.form_arr = this.formID.elements;
for (var i = 0; i < this.form_arr.length; i++) {
(function (Index) {
if (_this.form_arr[Index].getAttribute('must') == 'true') {
Fn(_this.form_arr[Index], num++);
t++;
if (num >= t) {
num = t;
}
}
})(i);
};
},
onFocus: function (thisCheck, Index) {//获得焦点
var _this = this;
myEvent(thisCheck, 'focus', function () {
thisCheck.parentNode.removeChild(thisCheck.nextSibling);
var oSpan = document.createElement('span');
oSpan.innerHTML = _this.text_msg[Index];
thisCheck.parentNode.insertBefore(oSpan, thisCheck.nextSibling);
});
},
onBlurs: function (thisCheck, Index) {//失去焦点
var _this = this;
myEvent(thisCheck, 'blur', function () {
_this.createErrOrCor(thisCheck, Index);
});
},
createErrOrCor: function (thisCheck, Index) {//创建span （错误或者正确的状态）。
var _this = this;
_this.verify(Index);
thisCheck.parentNode.removeChild(thisCheck.nextSibling);
var oSpan = document.createElement('span');
if (_this.result[Index]) {
oSpan.innerHTML = _this.cor_text[Index];
oSpan.className = 'cor';
oSpan.style.border = 'none';
thisCheck.style.border = '1px solid #a6ce38';
thisCheck.parentNode.insertBefore(oSpan, thisCheck.nextSibling);
}
else {
oSpan.innerHTML = _this.err_text[Index];
oSpan.className = 'err';
oSpan.style.border = 'none';
thisCheck.style.border = '1px solid #f00';
thisCheck.parentNode.insertBefore(oSpan, thisCheck.nextSibling);
}
},
verify: function (Index) {//验证判断
var _this = this;
this.result = [];
if (Index === 0 || Index) {
this.result[Index] = this.checkArr[Index]();
}
else {
for (var i = 0; i < this.checkArr.length; i++) {
this.result.push(this.checkArr[i]());
};
}
},
btnClick: function (f) {//提交验证
var _this = this;
this.formID.onsubmit = function () {
var n = true;
_this.screen(function (thisCheck, Index) {
_this.createErrOrCor(thisCheck, Index);
if (_this.result[Index] == false) {
n = false;
}
else if (_this.result[Index] == _this.result[Index] + 1) {
n = true;
}
});
if (f) {
return f() && n;
}
else {
return n;
}
};
},
word_dal: function () {//textarea输入字符判断
var _this = this;
myEvent(_this.checkWord.textareaID, 'keyup', function () {
var text_len = stringSize(_this.checkWord.textareaID.value);
_this.checkWord.wordID.innerHTML = text_len <= _this.checkWord.maxNum ? '还可以输入' + '<i>' + (_this.checkWord.maxNum - text_len) + '</i>' + '字' : '已超出' + '<i>' + -(_this.checkWord.maxNum - text_len) + '</i>' + '字';
function stringSize(s) {
return s.length + (s.match(/[^\x00-\xff]/g) || '').length;
}
});
}
};
function myEvent(obj, sEvent, fn) {
obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);
};
</script>
</body>
</html>
