1. 输入框去除两边空格
$('#id名').val().trim()
2. 配置样式时,前面加上大div标签,避免全局污染
#big span
3. 输入框常用配置样式
input{
width: 200px;
height:20px;
padding: 4px 0;
outline: none;
font-size: 14px;
text-indent: 10px;
color: #333;
box-shadow: none;
}
4.单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<style>
#big .checkBox{
font-size: 14px;
}
</style>
</head>
<body>
<div id="big" ><div style="padding: 5px 0">
<div class="radioDiv">
<span class="mandatory">申请等级:</span>
<input type="radio" value="1"> <p>你</p>
<input type="radio" value="2" > <p>我</p>
<input type="radio" value="3" > <p>他</p>
</div>
</div>
</div>
<script type="text/javascript">
// 单选框
let radioValue = '';
$(".radioDiv input[type='radio']").click(function(){
//1.先移除之前元素的checked
$(".radioDiv input[type='radio']:checked").removeAttr("checked");
//2.给当前点击的单选框加checked
$(this).attr("checked","true")
radioValue = $(".radioDiv input[type='radio']:checked").val();
})
</script>
</body>
</html>
5.表单ajax提交
#big .btn{
color: aliceblue;
background-color: #3598ff;
width: 200px;
height: 35px;
border-radius: 4px;
border-style: none;
font-size: 14px;
}
<div>
<span>姓名:</span>
<input type="text" id="name" value="">
</div>
<div>
<span>密码:</span>
<input type="number" id="password" value="" >
</div>
<div>
<button class="btn">提交申请</button>
</div>
$("button").on('click', function(){
const name = $('#name').val().trim();
const password = $('#password').val().trim() || '';
const disabled = !name || !password
//const disabled = !name || !password || !radioValue //radioValue是上面提到的
if(disabled){
alert('必填项,请填写完整');
}else{
const pram = {
content: {
name,
password,
radioValue,
}
};
$.ajax({
type : "POST", //提交方式
url : "",//路径
data : pram, //数据,这里使用的是Json格式进行传输
success : function(result) {//返回数据根据结果进行相应的处理
alert(result.description);
$("#name").val("");
$("#password").val("");
//$(".radioDiv input[type='radio']:checked").removeAttr("checked");
},
complete: function() {
console.log();
}
});
}
});