jquery Ajax表单验证简单例子

例子!

 代码如下 复制代码

 

   <div class="bdbox">
        <ul> 
     <li><span class="bdl"><em>*</em>企业名称:</span>&nbsp;&nbsp;<span class="bdr"><input id="companynames" name="companyname" size="30" class="txt" /></span></li>
            <li><span class="bdl"><em>*</em>企业网址:</span>&nbsp;&nbsp;<span class="bdr"><input id="companyurls" name="companyurl" size="30" class="txt" /></span></li>
            <li><span class="bdl"><em>*</em>您的称呼:</span>&nbsp;&nbsp;<span class="bdr"><input id="names" name="name" size="30" class="txt" /></span></li>
     <li><span class="bdl"><em>*</em>您的手机:</span>&nbsp;&nbsp;<span class="bdr"><input id="phones" name="phone" size="30" class="txt" /></span></li>
     <li class="gaob"><span class="bdl">&nbsp;&nbsp;&nbsp;备注留言:</span><span class="bdr"><textarea id="notes" name="note" rows="3" cols="26" onfocus="if(value=='请填写您想说的其他内容!') {value=''}" onblur="if (value ==''){value='请填写您想说的其他内容!'}">请填写您想说的其他内容!</textarea></span></li>
     <li class="gaoc">
            <input id="wfsubmits" type="image" src="__PUBLIC__/images/lijishenqing.jpg"
           onclick="customerAdds()" name="wfsubmits" value="" class="send" />
    <input type="hidden" value="" name="web_ref" id="web_ref" />
     </li>
        </ul> 
   </div>   
<script type="text/javascript">
      function customerAdds(){
   $("#wfsubmits").attr('disabled','disabled');
   var companyname=$("#companynames").val();
   var companyurl=$("#companyurls").val();
   var name=$("#names").val();
   var phone=$("#phones").val();
   var note=$("#notes").val();
 
   if(companyname == ''){
  ui.error("企业名称不能为空!");
  $("#wfsubmits").removeAttr('disabled');
  return false;
   }
   if(name == ''){
  ui.error("您的称呼不能为空!");
  $("#wfsubmits").removeAttr('disabled');
  return false;
   }
  if(phone == ''){
  ui.error("手机号码不能为空!");
  $("#wfsubmits").removeAttr('disabled');
  return false;
  }else if(isPhone(phone)==false){
  ui.error("手机号码格式不正确!");
  $("#wfsubmits").removeAttr('disabled');
  return false;
  }
  $.post("{:U('Home/Index/ajaxAddCustomer')}",{companyname:companyname,companyurl:companyurl,name:name,phone:phone,note:note},function(res){
  if(res>0) {
   $("#companynames").val('');
   $("#companyurls").val('');
   $("#names").val('');
   $("#phones").val('');
   $("#notes").val('');
   ui.success('提交成功');
  }else {
   ui.error('提交失败');
  }
  $("#wfsubmits").removeAttr('disabled');
 });
}
     function isPhone(str){
          var re=/^((\(\d{3}\))|(\d{3}\-))?13[0-9]\d{8}?$|15[0-9]\d{8}?$|18[0-9]\d{8}?$/;
   if (re.test(str) != true) {
  return false;
   }else{
  return true;
 } 
  }
</script>

时间: 2024-11-20 19:34:21

jquery Ajax表单验证简单例子的相关文章

jquery validate表单验证的基本用法入门_jquery

 一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要

jquery validate表单验证插件_jquery

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

jquery.validate表单验证插件使用方法解析_jquery

为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易.jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下 使用方式 1.在控件中使用默认验证规则,例子: 电子邮件(必填) <input id="email" class="required email" value="email@" /> 2.可以在控件中自定义验证规则

功能强大的jquery.validate表单验证插件_jquery

本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示   2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点

jQuery Validate表单验证深入学习_jquery

之前一篇文章介绍了jQuery Validate表单验证入门的基础知识,详细内容参见<jQuery Validate表单验证入门学习>,今天这篇文章深入学习jQuery Validate表单验证,以下就是文章的全部内容: 1.用其他方式替代默认的 SUBMIT $().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"

jQuery Validate表单验证入门学习_jquery

本文讲述了jQuery Validate表单验证入门的基础知识,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,以下就是本文的全部内容,特分享给大家. 1.导入 js 库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/j

深入学习jQuery Validate表单验证_jquery

本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea

jQuery Validate表单验证插件 添加class属性形式的校验_jquery

本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一.jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----添加cla

JQuery.validationEngine表单验证插件(推荐)_jquery

 一.说明 jQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字.整数.最大值.最小值 3.日期类型:日期(yyyy-MM-dd/ yyyy/MM/dd等).日期+时间.最小日期.最大日期.日期时间段 4.业务字段:url.email.phone.ipv4:ciaoca版扩展支持:qq.邮政编码.身份证.汉字. 5.Ajax后台验证:支持全局扩展定义,后台可定