<form methos="post" action=""> <div> <label for="username">用户名</label> <input type="text" /> </div> <div> <label for="email">邮箱</label> <input type="text" /> </div> <div> <label for="personinfo">个人资料</label> <input type="text" /> </div> <div> <input type="submit" value="提交" /> <input type="reset" /> </div> </form>
验证用户输入的是否正确
$('form :input').blur(function(){ var $parent = $(this).parent(); // 删除以前的提示元素 $parent.find(".formtips").remove(); // 验证用户名 if($(this).is('#username')){ if(this.value == '' || this.value.length < 6){ var errorMsg = '请输入至少6位的用户名'; $parent.append('<span>'+errorMsg+' </span>'); }else{ var okMsg = '输入正确'; $parent.append('<span>'+okMsg+'</span>'); } } // 验证邮箱 if($(this).is('#email')){ if(this.value == '' || (this.value != "" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))){ var errorMsg = '请输入正确的E-Mail地址'; $parent.append('<span>'+errorMsg+' </span>'); }else{ var okMsg = '输入正确'; $parent.append('<span>'+okMsg+'</span>'); } } });
提交按钮绑定事件
// 提交按钮 $('#send').click(function(){ $('form .required:input').trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } alert("注册成功"); });