https://cnodejs.org/topic/56ef3edd532839c33a99d00e 前端资源

表单验证ajax提交

formFree:function(){
    $(".free-form").bind('submit',function(event){
       event.preventDefault();//阻止submit事件(用ajax提交)
var $form=$(this);
$form.find('.error').html();//清空提示信息
//$('.free-form .error').html('');//清空提示信息
var name = $form.find('input[name=freeusername]');
var mobile = $form.find('input[name=freemobile]');
var regTest = /^1[3|4|5|7|8][0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$/;
if(!name.val().length || name.val() == name.attr('data-value') ){
$form.find('.error').html('请填写姓名');
name.focus();
return false;
}
if(!mobile.val().length || mobile.val() == mobile.attr('data-value') ){
$form.find('.error').html('请填写电话');
mobile.focus();
return false;
}
if(!regTest.test( mobile.val() )){
$form.find('.error').html('电话格式不对');
mobile.focus();
return false;
}
$.ajax({
url:'http://www.17house.com/signup',
type:'POST',
data:'realname='+name.val()+'&mobile='+mobile.val()+'&source=39',
dataType:'json',
success:function(data){
if(data.status == 1){
alert(data.msg);
}else{
alert('提交成功');
}
}
})
return false;          
    })
    }

html: 

<form method="post" action="" class="free-form">
          <input type="text" class="input mb20" name="freeusername" data-value="您的称呼" value="">
          <input type="text" class="input" name="freemobile" data-value="您的电话" value="">
          <p class="error"></p>
          <input type="submit" class="freeformbtn" value="免费申请">
          <p class="count">累计服务<span class="cOrange">864987</span>业主</p>
</form>

//input点击失去焦点 

focusBlur: function(ele) {

 

function trimCode(s) {
s = $.trim(s);
s = s.replace(/ /g, '');
s = s.replace(/\t/g, '');
s = s.replace(/\r/g, '');
s = s.replace(/\n/g, '');
return s;
}
for(var i=0;i<ele.length;i++){
var _e = $(ele[i]);
//取当前值,并替换掉两端空格、替换掉回车符, 检查是否和 data-value 属性的默认值 相同。
var _val = trimCode(_e.val());
if (_val == '') {
_e.val(_e.attr('data-value')); //初始化
}
_e.focus(function() {
var _val = $.trim($(this).val());
if ($(this).attr('data-value') == _val) {
$(this).val('');
}
}).blur(function() {
var _val = $.trim($(this).val());
var _attrVal = $(this).attr('data-value');
if (_val == '') {
$(this).val(_attrVal);
}
});
}
}

 

posted @ 2016-03-24 13:36  乐淘淘zzxh  阅读(229)  评论(0编辑  收藏  举报