上边的div中显示的就是注册表单的内容。
一共四项,和大家看到的dialog中的是一致的
然后来看如何对这些数据进行验证,验证代码如下:
//注册表单相关函数和验证
//获取name,password,email和birth对象并将对象添加到一个空对象中备用
varuname=$("#uname"),
password=$("#upass"),
email=$("#email"),
birth=$("#birth"),
fields=$([]).add(uname).add(password).add(email),
tips=$(".validateTips");
$("#register-form").dialog({
//打开对话框的时候移除表单域的样式并设置错误信息显示文本为默认值
open:
function(){
tips.removeClass().text("所有的表单域都为必填项.");
fields.removeClass("ui-state-error");
fields.val("");
},
modal:
true,//弹出带有遮罩的模式窗体
autoOpen:
false,//不自动打开
buttons:
{
提交:
function(){
//点击提交按钮时执行的事件
varchk=true;
//验证字段长度是否符合要求
chk=chk&&checkLength(uname,"username",2,15);
chk=chk&&checkLength(password,"password",6,20);
chk=chk&&checkLength(email,"email",6,40);
chk=chk&&checkLength(birth,"birthday",8,10);
//正则表达式验证用户名和email是否合法
chk=chk&&checkReg(name,/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])|_\w*$/,"用户名必须以字母、下划线或者汉字开头,请修改后提交");
chk=chk&&checkReg(email,/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,"请输入正确的email格式,格式如下:
admin@");
在上边的验证中使用到了checkLength()方法和checkReg方法,这两个方法分别都是自定义方法,分别是验证字段长度和通过正则表达式验证输入是否合法的方法,在jQueryUI官方提供的Demo里也有相应的方法,我在这里对方法做修改,因为官方的DEMO中当验证失败后,重新打开DIALOG时,验证失败的提示信息和错误样式都还保存着。
而我写的方法已经做了修改。
不会有这样的问题,下面是checkLength和checkReg方法,方法的注释我写的很清楚了,不再解释,我会说下关于添加错误CSS样式的东西。
//判断字段长度是否符合要求的方法,四个参数分别为:
o被检测的对象,msg被检测对象显示名称
//min允许的最小长度,max允许的最大长度
functioncheckLength(o,msg,min,max){
if(o.val().length>max||o.val().length o.addClass("ui-state-error");//为当前的错误域添加CSS样式 updateTip(msg+"的长度必须在"+min+"到"+max+"之间");//更新提示区域的信息 returnfalse; }else{ //如果验证通过则移除当前对象的CSS错误样式 o.removeClass("ui-state-error"); returntrue; } } //通过正则表达式验证内容的方法,o为表单域对象,reg为正则表达式,n为错误提示信息 functioncheckReg(o,reg,n){ if(! reg.test(o.val())){ o.addClass("ui-state-error"); updateTip(n); returnfalse; }else{ o.removeClass("ui-state-error"); returntrue; } } 在这两个方法中都用到了一个updateTip方法,该方法的作用就是给那个 标签也就是错误消息显示的地方添加一个css样式,用来高亮提示用户的。 方法如下: //更新提示信息的方法,传递的参数t为显示的错误信息,然后为显示信息的标签添加高亮 functionupdateTip(t){ tips.text(t).addClass("ui-state-highlight"); } 验证的过程就是如上面显示的那样,方法都有比较详细的注释,大家可以自己看 当用户输入的都被我们验证,并通过后,应该像后台发起ajax请求了。 具体代码如下: 此处用到了一个formSerialize()方法,是一个jquery.form.js的脚本文件,针对表单的一个jq插件,可以序列化表单,这样我们只需要把序列化后的值传递给后台就行,不用一个个获取再拼接了。 如果需要用到请自行引入该脚本 if(chk){ //验证通过后移除提示处的样式和错误消息 tips.removeClass().text(""); //序列化表单 varuser=$("#reg-form").formSerialize(); //发起ajax请求 $.ajax({ type: 'post', url: '${path}/UserAction? method=register', data: user, success: function(msg){ if(msg=="success"){ $("#register-form").dialog("close"); }else{ alert("服务器异常,请稍后再试"); } }, error: function(){ alert("ajax请求失败"); } }); } 整个的注册流程就是这样,当注册完成后会关闭dialog,下面的图片显示当验证出现错误时的样式 下一次将会讲解jQueryUI的datepicker组件的使用 copyright@ 2008-2022 冰豆网网站版权所有 经营许可证编号:鄂ICP备2022015515号-1