jQuery は、jQuery オブジェクトの class クラスを変更することでフォーム検証をカスタマイズします。

送信せずにフォームを使用する場合は、フォームが空かどうかなどを確認する必要があります。次のボタンにクリック イベントを自分で追加し、フォーム データを監視できます。

html

<input  class="formbackground"  id="position" name="position" type="text">//这是一个输入框

 <div class="rewidthcolor" οnclick="nextstamp();">下一步</div>//点击下一步判断是否输入

CSSスタイル

.formbackground{
    border: 0;
    background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#D2D2D2, #D2D2D2);
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center calc(100% - 1px);
    background-color: transparent;
    transition: background 0s ease-out;
  
}

.formbackgroundred{
    border: 0;
    background-image: linear-gradient(#f44336,#f44336), linear-gradient(#f44336,#f44336);
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center calc(100% - 1px);
    background-color: transparent;
    transition: background 0s ease-out;
 
}

background-image 为下border，考虑到苹果页面对input自带下面框样式的不兼容性

js

function nextstamp() {
    var positiondetail=$("#position").val(); if(positiondetail===null || positiondetail===undefined ||positiondetail===""){//这里判断非空等条件

            $("#position").removeClass("formbackgroundred").addClass("formbackground");
 }

	}
	//$("#position").css('border','1px solid red');//这里是直接修改border颜色，也可以起到验证效果，但是不建议使用

ここでは、背景色をクラスのスタイルを置き換えることで実現していますが、元のスタイルを削除してから赤色のスタイルを追加することで、カスタムフォームの検証が完了します。

タイトルを展開する

  // bbb クラスを追加します。 aaa と bbb が同時に存在します。

 	$(".aaa").addClass("bbb");

• クラスクラスを変更する

  //方法一
      //先删除，后添加。或者先添加后删除均可
      $(".aaa").addClass("bbb").removeClass("aaa");
      $(".aaa").removeClass("aaa").addClass("bbb");
  //方法二
      //利用attr方法
      $(".aaa").attr("class","bbb");
      //这里需要注意的是，如果这个HTML标签不止有aaa这一个类时，
      //这个方法之后，这个HTML标签会只有bbb这一个class类,
  
      //当然也可以设置多个
      $(".aaa").attr("class","bbb ccc ddd");

• クラスが存在するかどうかを確認する

  //判断HTML标签中是否有bbb这个class类
  $(".aaa").hasClass("bbb");
  //返回值是一个boolean值，存在返回true，不存在返回false。

文章が不完全なので修正してください！