jQuery-UI，验证注册表单
html
<form id="reg" action="123.html" title="会员注册">
<ol class="reg_error"></ol>
<p>
<label for="user">帐号：</label>
<input type="text" name="user" class="text" id="user"/>
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="text" name="pass" class="text" id="pass"/>
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email"/>
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="male" checked="checked"><label for="male">男</label></input>
<input type="radio" name="sex" id="female"><label for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="date" readonly="readonly" class="text" id="date"/>
</p>
</form>
css
/*注册框*/
#reg {
padding: 15px;
} #reg p {
margin: 10px 0;
padding:;
} #reg p label {
font-size: 14px;
/*color: #666;*/
} #reg p .star {
color: red;
} #reg .text {
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
height: 25px;
width: 200px;
text-indent: 5px;
color: #666;
}
#reg .reg_error{
color: #ff171f;
padding:;
margin:0 0 0 20px;
}
#reg .succ{
display:inline-block;
width:20px;
background:url(../img/reg_succ.png) no-repeat;
} /*ui提示信息*/
.ui-tooltip{
color: #ff1c24;
} .su{
width: 50px;
height: 20px;
background-color: #2cff24;
}
js
//注册框
$('#reg_a').on('click',function () { //将注册框，执行对话框方法
$('#reg').dialog({
autoOpen : true,
modal : true,
resizable : false,
width : 320,
height : 360,
buttons : {
'提交' : function () {
$(this).submit(); //执行提交方法
}
},
closeText : '关闭对话框'
}).buttonset().validate({ //验证表单
submitHandler: function (form) { //全部验证成功准备提交
alert('验证完成，准备提交！');
},
highlight: function (element, errorClass) { //如果出错，错误框边框改变颜色
$(element).css('border', '1px solid #630');
},
unhighlight: function (element, errorClass) { //如果正确取消边框改变颜色
$(element).css('border', '1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('succ'); //显示正确图片
},
showErrors: function (errorMap, errorList) { //获取出错句柄
var errors = this.numberOfInvalids();
if (errors > 0) { //判断出错句柄个数来改变对话框的高度
$('#reg').dialog('option', 'height', errors * 20 + 340);
} else {
$('#reg').dialog('option', 'height', 360);
}
this.defaultShowErrors();
},
errorLabelContainer: 'ol.reg_error', //有错误时，将所有表单错误信息统一放到class为ol.reg_error的元素里
wrapper: 'li', //将每个错误信息放入一个li标签
rules : {
user : {
required:true,
rangelength:[2,10]
},
pass:{
required:true,
rangelength:[6,20]
},
email:{
required:true,
email:true
}
},
messages : {
user : {
required:'用户名不能为空！',
rangelength:jQuery.format('用户名不得小于{0}位，大于{1}位')
},
pass:{
required:'密码不能为空',
rangelength:jQuery.format('密码不得小于{0}位，大于{1}位')
},
email:{
required:'邮箱不能为空',
email:'请输入正确的邮箱格式'
}
}
}); //邮箱执行自动补全
$('#email').autocomplete({
autoFocus: true,
delay: 0,
source: function (request, response) {
var hosts = ['qq.com', '163.com', '263.com', 'gmail.com', 'hotmail.com'], //起始
term = request.term, //获取输入值
ix = term.indexOf('@'), //@
name = term, //用户名
host = '', //域名
result = []; //结果
//结果第一条是自己输入
result.push(term);
if (ix > -1) { //如果有@的时候
name = term.slice(0, ix); //得到用户名
host = term.slice(ix + 1); //得到域名
}
if (name) {
//得到找到的域名
var findedHosts = (host ? $.grep(hosts, function (value, index) {
return value.indexOf(host) > -1;
}) : hosts),
//最终列表的邮箱
findedResults = $.map(findedHosts, function (value, index) {
return name + '@' + value;
});
//增加一个自我输入
result = result.concat(findedResults);
}
response(result);
}
}); //将生日执行日历ui
$('#date').datepicker({
showOtherMonths:true,
changeYear:true,
changeMonth:true,
yearSuffix:''
});
});