第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
HTML
<form id="reg" method="post" action="yzh.php" 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" value="男"><label for="male">男</label></input> <input type="radio" name="sex" id="female" value="女"><label for="female">女</label></input> </p> <p> <label for="date">生日：</label> <input type="text" name="date" readonly="readonly" class="text" id="date"/> </p> </form> <div id="loading">数据交互中...</div>
css
/*注册框*/ #reg { padding: 15px; display: none; } #reg p { margin: 10px 0; padding: 0; } #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:0; 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; } #loading { line-height:30px; font-size:14px; font-weight:bold; text-indent:40px; color:#666; padding-left:40px; }
前台js
closeOnEscape对话框插件属，性阻止点击键盘ESC键关闭dialog
beforeClose对话框插件属性，值是一个函数，关闭对话框执行函数
submitHandler表单验证插件属性，值是一个函数，全部验证成功执行函数，接收一个参数是表单对象
beforeSubmit提交ajax提交插件属性，值是一个函数，提交时执行函数
success提交ajax提交插件属性，值是一个函数，提交成功后执行函数
highlight表单验证插件属性，值是一个函数，当验证不合法时执行函数
unhighlight表单验证插件属性，值是一个函数，当验证合法时执行函数
showErrors表单验证插件属性，值是一个函数，当验证不合法时执行函数，可以获取不合法句柄
$('#loading').dialog({ //数据交互提示框，执行对话框方法
autoOpen : false, //创建对话框关闭
modal : true, //遮罩
closeOnEscape : false, //阻止点击键盘ESC键关闭dialog
resizable : false, //阻止调整对话框大小
draggable : false, //阻止对话框可以移动
width : 230,
height : 50
}).parent().parent().find('.ui-widget-header').hide(); //找到对话框标题隐藏
//注册框
$('#reg_a').on('click',function () { //将注册框，执行对话框方法
$('#reg').dialog({
autoOpen : true,
modal : true,
resizable : false,
width : 320,
height : 360,
buttons : { //注册对话框创建按钮
'提交' : function () {
$(this).submit(); //执行提交方法
}
},
closeText : '关闭对话框',
beforeClose:function (e,ui) { //将要关闭，执行回调函数
$('#reg').resetForm(); //Ajax 表单插件方法，重置表单
$('#reg span.star').html('*').removeClass('succ'); //改变提示信息
$('#reg ol').html(''); //将提示信息去掉
$('#reg input').css('border', '1px solid #ccc'); //改变出错边框颜色
}
}).buttonset().validate({ //验证表单
submitHandler: function (form) { //全部验证成功准备提交
$(form).ajaxSubmit({ //Ajax 表单插件方法，提交
url: 'add.php', //提交页面
type: 'POST', //提交方式
beforeSubmit: function (formData, jqForm, options) { //提交时
$('#loading').dialog('open'); //打开交互对话框
$('#reg').dialog('widget').find('button').eq(1).button('disable'); //将注册对话框的提交按钮禁止
$('#loading').css('background', 'url(img/743.gif) no-repeat 20px center').html('数据交互中...'); //载入交互对话框图片
},
success: function (responseText, statusText) { //提交后
if (responseText) { //判断提交成功返回值
$('#reg').dialog('widget').find('button').eq(1).button('enable'); //取消阻止注册提交按钮
$('#loading').css('background', 'url(img/chg.png) no-repeat 20px center').html('数据新增成功...'); //载入提交成功图片
setTimeout(function () { //睡眠1秒
$('#loading').dialog('close'); //关闭交互提示对话框
$('#reg').dialog('close'); //关闭注册对话框
$('#reg').resetForm(); //重置表单
$('#reg span.star').html('*').removeClass('succ'); //改变验证提示信息
}, 10000);
}
}
});
},
highlight: function (element, errorClass) { //如果出错，错误框边框改变颜色
$(element).css('border', '1px solid #630');
$(element).parent().find('span').html('*').removeClass('succ'); //改变验证提示信息
},
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 + 360); //注册对话框自动根据错误数量来改变高度
} 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] //不得小于2位大于10位
},
pass:{ //验证密码
required:true, //不能为空
rangelength:[6,20] //不得小于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:''
});
});
提交PHP文件
<?php header('Content-Type:text/html; charset=utf-8'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PWD', '279819'); define('DB_NAME', 'zhiwen'); $conn = @mysql_connect(DB_HOST, DB_USER, DB_PWD) or die('数据库链接失败：'.mysql_error()); @mysql_select_db(DB_NAME) or die('数据库错误：'.mysql_error()); @mysql_query('SET NAMES UTF8') or die('字符集错误：'.mysql_error()); sleep(3); require 'config.php'; $query = "INSERT INTO user (user, pass, email, sex, birthday, date) VALUES ('{$_POST['user']}', sha1('{$_POST['pass']}'), '{$_POST['email']}', '{$_POST['sex']}', '{$_POST['birthday']}', NOW())"; mysql_query($query) or die('新增失败！'.mysql_error()); echo mysql_affected_rows(); mysql_close(); ?>