我是使用 JQuery 学习输入验证的新手，无需提交表单。我想在我的 html 中添加以下验证规则:
- 检查输入字段是否为空，然后更改背景颜色，直到输入有效值。
- 检查“仅限名称”字段是否正在获取字符串，“仅限数字”字段是否正在获取数字，否则更改背景颜色，直到输入任何有效值。
我想在 jQuery 中以非常简单的方式手动完成此操作，无需插件。
这是我的源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
//font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 12px;
height: 100%px;
line-height: 100%px;
outline: medium none;
padding: 8px 12px;
//width: 100%;
}
.twitter-typeahead {
width: 100%;
display:block !important;
}
.typeahead {
background-color: #84e184;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
//width: 422px;
}
.tt-suggestion {
font-size: 12px;
line-height: 12px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Test</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">ID</label>
<div class="col-sm-5 " id = "empid" >
<div class=" input-group ">
<span class="input-group-addon "><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input class="form-control " list="employeeid" name="employeeid" placeholder="Enter ID">
<datalist id="employeeid">
</datalist>
<span class="input-group-btn">
<button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
<span class="input-group-addon"><i class="glyphicon glyphicon-search " aria-hidden="true" ></i></span>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="employename" id="employename" placeholder="Enter Name" >
<span id="errmsg2" class="errmsg"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Number</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="number" id="number" placeholder="Enter Number" >
<span id="errmsg2" class="errmsg"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" onclick="" id="button1" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>如果我理解了这个验证，那么它将对我将来理解更复杂的验证非常有帮助。所以请帮助我。谢谢
最佳答案
检查这个 jquery 代码，它为您做同样的事情。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
//font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 12px;
height: 100%px;
line-height: 100%px;
outline: medium none;
padding: 8px 12px;
//width: 100%;
}
.twitter-typeahead {
width: 100%;
display:block !important;
}
.typeahead {
background-color: #84e184;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
//width: 422px;
}
.tt-suggestion {
font-size: 12px;
line-height: 12px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Test</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">ID</label>
<div class="col-sm-5 " id = "empid" >
<div class=" input-group ">
<span class="input-group-addon "><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input class="form-control " list="employeeid" name="employeeid" id="employeeid" placeholder="Enter ID">
<datalist id="employeeid">
</datalist>
<span class="input-group-btn">
<button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
<span class="input-group-addon"><i class="glyphicon glyphicon-search " aria-hidden="true" ></i></span>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="employename" id="employename" placeholder="Enter Name" >
<span id="errmsg2" class="errmsg"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Number</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="number" id="number" placeholder="Enter Number" >
<span id="errmsg2" class="errmsg"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" onclick="" id="button1" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
checkEmpty();
function checkEmpty(){
$('form').find('input').on('blur', function(){
if($(this).val()==''){
$(this).css('background-color','red');
} else {
$(this).css('background-color','transparent');
};
});
};
$('button#button1').on('click', function(){
$('form').find('input').each(function(){
if($(this).val()==''){
$(this).css('background-color','red');
} else {
$(this).css('background-color','transparent');
};
});
});
$('#employeeid,#number').keypress(function(e){
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
$('#employename').keypress(function(e) {
if(e.which < 97 /* a */ || e.which > 122 /* z */) {
e.preventDefault();
}
});
</script>
</body>
</html>关于JQuery输入验证: How To Check Each Input For Empty or Character or Number Without form submit，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37694742/