表单提交
思路：
1.失去焦点,判断是“用户名”还是“邮箱”，分别处理
2.如果是用户名，判断元素长度的值是否小于6，如果小于6，红色输入框提示不正确，反之，绿色提醒正确
3.判断邮箱是否符合正则表达式
<label>名称：</label><input type="text" class="required" id="name"/><br>
<label>密码：</label><input type="text" class="required" id="pwd"/><br>
<label>个人资料：</label><input type="text"/><br>
<label>详细信息：</label><textarea name="" id="" cols="30" rows="10"></textarea><br>
<button id="btn" value="表单提交">表单提交</button>
<button id="reset" value="表单重置">表单重置</button><br>
$(‘:input‘).blur(function(){ //多点击几次会一直提醒错误，所以要删除 $(this).next(‘span‘).remove()//重要 var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ //用户名 if($(this).is(‘#name‘)){ if(this.value==""||this.value.length<6){ $(this).after(‘<span class="red">请输入至少6位的用户名</span>‘) }else{ $(this).after(‘<span>输入正确</span>‘) } } //邮箱 if($(this).is(‘#pwd‘)){ if(this.value==""||!reg.test(this.value)){ //注意加叹号 $(this).after(‘<span class="red">请输入正确的邮箱</span>‘) }else{ $(this).after(‘<span>输入正确</span>‘) } } return false }).keyup(function(){ $(this).triggerHandler(‘blur‘) }).focus(function(){ $(this).triggerHandler(‘blur‘) }) $(‘#btn‘).click(function(e){ // debugger $(‘.required:input‘).trigger(‘blur‘) var numError=$(‘.red‘).length if(numError){ return false; }else { alert(‘注册成功‘) } })
总结：
1.判断当前元素是某个元素
$(this).is(‘#name‘)
2.可以用this.value代替val()
3.绑定事件，在keyup和focus中，用trigglerHandler绑定blur事件
$(‘:input‘).blur(function(){ 。。。。。。。。。。。。。 }).keyup(function(){ $(this).triggerHandler(‘blur‘) }).focus(function(){ $(this).triggerHandler(‘blur‘) })
$(‘#btn‘).click(function(e){ $(‘.required:input‘).trigger(‘blur‘)//绑定事件 var numError=$(‘.red‘).length if(numError){ return false; }else { alert(‘注册成功‘) } })
原文：http://www.cnblogs.com/summerXll/p/6513977.html