jquery 양식 제출 오류 메시지 프롬프트 기능 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery 양식 제출 오류 메시지 프롬프트 기능 구현

小云云

Jan 23, 2018 am 09:06 AM

이 글에서는 참고할만한 좋은 오류 메시지 프롬프트 효과가 있는 jquery 양식 제출의 예를 주로 소개합니다. 편집기를 사용하여 살펴보겠습니다. jQuery 양식 기능을 더 잘 완성하는 데 도움이 되기를 바랍니다.

렌더링:

html 코드:

    <form action="" method="" name="form2">
      <p class="m_t30 error_p2">
        <p>
          我是
          <select name="identity" id="ko" class="form-control">
<option></option>
<option value="investor">投资者</option>
<option value="developer">地产开发商</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="text" class="form-control" name="name" placeholder="用户名">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="email" class="form-control" name="email" placeholder="电子邮箱">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="tel" class="form-control" name="phone" placeholder="手机">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
<p class="m_t10 error_p2">
        <p>
          <select name="country" class="form-control">
<option></option>
<option>国家或地区</option>
<option value="1">中国</option>
<option value="2">美国</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <select name="province" class="form-control">
<option></option>
<option>州/省</option>
<option value="1">广东</option>
<option value="2">加州</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="password" class="form-control" name="pwd" placeholder="密码">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="password" class="form-control" name="pwd2" placeholder="再次确认密码">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10">
        <p>
          <button class="btn btn_login" type="button" onclick="btn_register()">下一步</button>
        </p>
      </p>
    </form>

로그인 후 복사

css 코드:

<style>
  .m_t10 {
    margin-top: 20px;
  }
  .error_p2 {
    background-color: #FF6900;
    color: white;
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    display: none;
  }
  .error_p2 i {
    margin-right: 5px;
  }
</style>

로그인 후 복사

js code

<!--注册错误判断form2-->
<script>
  //定义要提交的所有数据为一个数组validate2，并且全部赋值为false
  var validate2 = {
    identity: false,
    name: false,
    phone: false,
    email: false,
    country: false,
    province: false,
    mail: false,
    pwd: false,
    pwd2: false
  };
  var msg = ""; //定义提示信息
  //判断角色  
  $(&#39;select[name=identity]&#39;, form2).blur(function() {
    var identity = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(identity == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入您的身份";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.identity = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.identity = true;
      return;
    }
  })
  //      //判断用户名  
  $(&#39;input[name=name]&#39;, form2).blur(function() {
    var name = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(name == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入用户名";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.name = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.name = true;
      return;
    }
  })
  //判断手机
  $(&#39;input[name=phone]&#39;, form2).blur(function() {
    var phone = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(phone == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入手机号";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.phone = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.phone = true;
      return;
    }
  })
  //判断国家
  $(&#39;select[name=country]&#39;, form2).blur(function() {
    var country = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(country == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入国家";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.country = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.country = true;
      return;
    }
  })
  //判断省份
  $(&#39;select[name=province]&#39;, form2).blur(function() {
    var province = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(province == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入省或州";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.province = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.province = true;
      return;
    }
  })
  //判断邮政编码
  $(&#39;input[name=mail]&#39;, form2).blur(function() {
    var mail = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(mail == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输邮政编码";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.mail = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.mail = true;
      return;
    }
  })
  //判断email
  $(&#39;input[name=email]&#39;, form2).blur(function() {
    var email = $(this).val();
    var reg = /\w+[@]{1}\w+[.]\w+/;
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    if(email == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请填写邮箱";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.eamil = false;
      return;
    } else if(reg.test(email) == false) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "邮箱格式不正确";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.email = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);

      validate2.email = true;
      return;
    }
  })
  //判断密码  
  $(&#39;input[name=pwd]&#39;, form2).blur(function() {
    var pwd = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(pwd == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "密码不能为空";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.pwd = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.pwd = true;
      return;
    }
  })
  //判断再次确认密码  
  $(&#39;input[name=pwd2]&#39;, form2).blur(function() {
    var pwd2 = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(pwd2 == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "确认密码不能为空";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.pwd2 = false;
      return;
    } else if(pwd2 != $(&#39;input[name=pwd]&#39;, form2).val()) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "确认密码与密码不一致";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.pwd2 = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.pwd2 = true;
      return;
    }
  })
  //提交表单，isOK的值是所有提交信息的true，false判断，
  //只要有一个为false，isOK的值就是false，
  //isOK值为false的话就全部执行一次表单元素的失去焦点事件，从而提示错误信息
  //isOK值为true的话才提交表单。  
  //因为有些页面可能不止一个需要提交的表单或者有些表单元素的name重复，所以根据form name=".. "，来区分元素失去事件，这里是form2就是对应的<form name>
  function btn_register() {
    var isOK = validate2.identity && validate2.name && validate2.phone && validate2.email && validate2.mail && validate2.country && validate2.province && validate2.pwd && validate2.pwd2;
    var form2 = $(&#39;form[name=form2]&#39;);
    if(isOK) {
      //。。。执行提交事件
      form2.submit();
    } else {
      $(&#39;select[name=identity]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=name]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=phone]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=email]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=mail]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;select[name=country]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;select[name=province]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=pwd]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=pwd2]&#39;, form2).trigger(&#39;blur&#39;);
    }
  }
</script>

로그인 후 복사

간단한 설명:

  //执行对应表单元素的失去焦点事件$(&#39;input[name=XX]&#39;,formX).blur()
  //定义对应的参数来获取值，如:var pwd=$(this).val();
  //定义参数获取对应错误提示信息的标签元素对象，这里的是var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
  //简要说明.parents(&#39;&#39;)方法获取的是祖先元素为（&#39;.error_p2&#39;），看清楚有带"s"，简单来说如果.error_p2是当前元素的上三级$(&#39;this&#39;).parent().parent().parent()，而用$(&#39;this&#39;).parents(&#39;.error_p2&#39;)能一步到位获取到该元素对象，而find(&#39;&#39;)方法刚好相反，一步到位的获取对应后辈元素对象
  //然后就是根据条件判断，判断的正则表达式我就不一 一举例了（因为我也记不住那么多= =、），是否符合返回对应的数组元素true、false值，实现隐藏错误提示，并且给数组validate2的值赋值。
  //最后提交表单时，再次执行判断isOK是否为true
  //isOK值为false的话就全部执行一次表单元素的失去焦点事件，从而提示错误信息
  //isOK值为true的话才提交表单。
  //ps:表单里的button元素如果不是提交按钮，记得将type=“button”，否则默认是type=“submit”，点击就会提交;

로그인 후 복사

마지막으로 쓴 말:

스타일과 레이아웃이 제대로 설정되지 않아 페이지 효과가 좋지 않아 정말 죄송합니다

늘 그렇듯이 jq를 작성하기 전에 원하는 객체가 무엇인지 생각해 보세요. 어떤 이벤트를 가져오고 실행하며 마지막으로 어떤 요소 개체가 어떤 효과를 얻습니까? 부모 및 찾기 메서드를 사용하면 문제가 발생하지 않지만, 사용할 때는 전체적인 효과를 얻기 위해 잘 중첩하는 데 주의를 기울이십시오.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1672

Cakephp 튜토리얼

1428

라라벨 튜토리얼

1332

PHP 튜토리얼

1276

C# 튜토리얼

1256

Related knowledge

Doubao 앱에는 어떤 기능이 있나요? Mar 01, 2024 pm 10:04 PM

Doubao 앱에는 많은 AI 생성 기능이 있을 예정인데 Doubao 앱에는 어떤 기능이 있나요? 사용자는 이 소프트웨어를 사용하여 그림을 만들고, AI와 채팅하고, 사용자를 위한 기사를 생성하고, 모든 사람이 노래를 검색하도록 도울 수 있습니다. Doubao 앱의 이 기능 소개는 구체적인 작동 방법을 알려드릴 수 있습니다. 구체적인 내용은 아래와 같으니 한번 살펴보세요! Doubao 앱에는 어떤 기능이 있나요? 답변: 그림 그리기, 채팅, 기사 쓰기, 노래 찾기 등이 가능합니다. 기능 소개: 1. 질문 쿼리: AI를 사용하여 질문에 대한 답변을 더 빠르게 찾을 수 있으며, 모든 종류의 질문을 할 수 있습니다. 2. 이미지 생성: AI를 사용하면 모든 사람에게 일반적인 요구 사항만 알려주면 됩니다. 3. AI 채팅: 사용자와 채팅할 수 있는 AI를 생성할 수 있으며,

vivox100s와 x100의 차이점: 성능 비교 및 기능 분석 Mar 23, 2024 pm 10:27 PM

vivox100s와 x100 휴대폰은 모두 in vivo 휴대폰 제품군의 대표적인 모델입니다. 두 휴대폰은 각각 서로 다른 시대의 vivo 첨단 기술 수준을 대표하므로 디자인, 성능, 기능 면에서 일정한 차이가 있습니다. 이번 글에서는 소비자들이 자신에게 꼭 맞는 휴대폰을 선택할 수 있도록 두 휴대폰을 성능비교와 기능분석 측면에서 자세히 비교해보겠습니다. 먼저 vivox100s와 x100의 성능 비교를 살펴보겠습니다. vivox100s에는 최신 기술이 탑재되어 있습니다.

셀프미디어란 정확히 무엇인가? 주요 특징과 기능은 무엇입니까? Mar 21, 2024 pm 08:21 PM

인터넷의 급속한 발전으로 셀프미디어라는 개념은 사람들의 마음속에 깊이 뿌리내렸습니다. 그렇다면 셀프미디어란 정확히 무엇인가? 주요 특징과 기능은 무엇입니까? 다음에는 이러한 문제를 하나씩 살펴보겠습니다. 1. 셀프미디어란 정확히 무엇인가? We-media는 이름에서 알 수 있듯이 당신이 미디어라는 뜻입니다. 개인이나 팀이 인터넷 플랫폼을 통해 콘텐츠를 독립적으로 생성, 편집, 출판 및 전파할 수 있는 정보 매체를 말합니다. 신문, 텔레비전, 라디오 등과 같은 전통적인 미디어와 달리 셀프 미디어는 더욱 상호작용적이고 개인화되어 있어 모든 사람이 정보의 생산자이자 전파자가 될 수 있습니다. 2. 셀프미디어의 주요 특징과 기능은 무엇입니까? 1. 낮은 문턱: 셀프미디어의 등장으로 미디어 산업에 진출하기 위한 문턱이 낮아졌습니다. 더 이상 번거로운 장비와 전문팀이 필요하지 않습니다.

Xiaohongshu 계정 관리 소프트웨어의 기능은 무엇입니까? Xiaohongshu 계정을 운영하는 방법은 무엇입니까? Mar 21, 2024 pm 04:16 PM

Xiaohongshu가 젊은이들 사이에서 인기를 끌면서 점점 더 많은 사람들이 이 플랫폼을 사용하여 자신의 경험과 인생 통찰력의 다양한 측면을 공유하기 시작했습니다. 여러 Xiaohongshu 계정을 효과적으로 관리하는 방법이 중요한 문제가 되었습니다. 이 글에서는 Xiaohongshu 계정 관리 소프트웨어의 일부 기능에 대해 논의하고 Xiaohongshu 계정을 더 잘 관리하는 방법을 살펴보겠습니다. 소셜 미디어가 성장함에 따라 많은 사람들이 여러 소셜 계정을 관리해야 한다는 사실을 깨닫게 되었습니다. 이는 Xiaohongshu 사용자에게도 어려운 과제입니다. 일부 Xiaohongshu 계정 관리 소프트웨어는 자동 콘텐츠 게시, 예약 게시, 데이터 분석 및 기타 기능을 포함하여 사용자가 여러 계정을 보다 쉽게 관리할 수 있도록 도와줍니다. 이러한 도구를 통해 사용자는 자신의 계정을 보다 효율적으로 관리하고 계정 노출과 관심을 높일 수 있습니다. 또한 Xiaohongshu 계정 관리 소프트웨어에는

디스커스란 무엇인가요? Discuz의 정의 및 기능 소개 Mar 03, 2024 am 10:33 AM

"Discovering Discuz: 정의, 기능 및 코드 예제" 인터넷의 급속한 발전과 함께 커뮤니티 포럼은 사람들이 정보를 얻고 의견을 교환하는 중요한 플랫폼이 되었습니다. 많은 커뮤니티 포럼 시스템 중에서 중국의 잘 알려진 오픈 소스 포럼 소프트웨어인 Discuz는 대다수의 웹 사이트 개발자 및 관리자가 선호합니다. 그렇다면 Discuz는 무엇입니까? 어떤 기능이 있으며 웹사이트에 어떻게 도움이 됩니까? 이 기사에서는 Discuz를 자세히 소개하고 독자가 이에 대해 더 자세히 알아볼 수 있도록 구체적인 코드 예제를 첨부합니다.

PHP 팁: 이전 페이지로 돌아가는 기능을 빠르게 구현 Mar 09, 2024 am 08:21 AM

PHP 팁: 이전 페이지로 돌아가는 기능을 빠르게 구현하세요. 웹 개발을 하다 보면 이전 페이지로 돌아가는 기능을 구현해야 하는 경우가 종종 있습니다. 이러한 작업은 사용자 경험을 향상시키고 사용자가 웹 페이지 간을 더 쉽게 탐색할 수 있게 해줍니다. PHP에서는 몇 가지 간단한 코드를 통해 이 기능을 구현할 수 있습니다. 이번 글에서는 이전 페이지로 돌아가는 기능을 빠르게 구현하는 방법을 소개하고 구체적인 PHP 코드 예제를 제공하겠습니다. PHP에서는 $_SERVER['HTTP_REFERER']를 사용하여 이전 페이지의 URL을 가져올 수 있습니다.

Linux에서 GDM의 기능과 기능에 대한 자세한 설명 Mar 01, 2024 pm 04:18 PM

Linux에서 GDM의 기능 및 기능에 대한 자세한 설명 Linux 운영 체제에서 GDM(GNOMEDisplayManager)은 사용자가 시스템에 로그인 및 로그아웃할 수 있는 인터페이스를 제공하는 그래픽 로그인 관리자입니다. GDM은 일반적으로 GNOME 데스크탑 환경의 일부이지만 다른 데스크탑 환경에서도 사용할 수 있습니다. GDM의 역할은 로그인 인터페이스를 제공하는 것뿐만 아니라 사용자 세션 관리, 화면 보호기, 자동 로그인 및 기타 기능도 포함합니다. GDM의 기능은 주로 다음과 같은 측면을 포함합니다:

PHP는 어떤 용도로 사용되나요? PHP의 역할과 기능 살펴보기 Mar 24, 2024 am 11:39 AM

PHP는 웹 개발에 널리 사용되는 서버 측 스크립팅 언어입니다. 주요 기능은 HTML과 결합하면 풍부하고 다채로운 웹 페이지를 생성할 수 있습니다. PHP는 강력하며 다양한 데이터베이스 작업, 파일 작업, 양식 처리 및 기타 작업을 수행하여 웹 사이트에 강력한 상호 작용과 기능을 제공합니다. 다음 기사에서는 자세한 코드 예제를 통해 PHP의 역할과 기능을 자세히 살펴보겠습니다. 먼저, PHP의 일반적인 용도를 살펴보겠습니다: 동적 웹 페이지 생성: P

See all articles

jquery 양식 제출 오류 메시지 프롬프트 기능 구현

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제