jQuery通过修改一个jQuery对象的class类来自定义表单验证

当我们使用表单不用submit是需要验证表单是否为空等。可以自己给你的下一步按钮添加点击事件，对你的表单数据进行监听，

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颜色，也可以起到验证效果，但是不建议使用

这里是通过替换class样式来实现背景变色，首先移除原有样式，然后添加变红的样式，这样就自定义表单验证就完成了

拓展title

  //增加一个bbb的class类，aaa与bbb同时存在

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

• 修改一个class类

  //方法一
      //先删除，后添加。或者先添加后删除均可
      $(".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");

• 判断是否存在一个class类

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

写的不全，欢迎指正！