当我们使用表单不用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。
写的不全,欢迎指正!