[英]Live validation using javascript
HTML:
<div id="error" style="position:absolute; left:auto; top:7px;"></div>
<div style="position:absolute; left:auto; top:25px;">
First name: <input type="text" id="fname" name="fname"><br>
Last name: <input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit" onclick="requiredFields()"><div>
使用Javascript:
function requiredFields(){
var fName = document.getElementById("fname").value;
var lName = document.getElementById("lname").value;
if(fName == ""){
document.getElementById("error").innerHTML = "First name field cannot be empty";
}else if(lName == ""){
document.getElementById("error").innerHTML = "Last name field cannot be empty";
}else{
document.getElementById("error").innerHTML = "";
alert("successful");
}
}
只需查看我的鏈接並幫助我.. http://jsfiddle.net/GACKm/
這是jsFiddle
//使用Javascript
<script type="text/javascript" language="javascript">
var oneTimeMsgClikced = false;
function requiredFields() {
var fName = document.getElementById("fname").value;
var lName = document.getElementById("lname").value;
if (fName == "") {
document.getElementById("error").innerHTML = "First name field cannot be empty";
oneTimeMsgClikced = false;
} else if (lName == "") {
document.getElementById("error").innerHTML = "Last name field cannot be empty";
oneTimeMsgClikced = false;
} else {
document.getElementById("error").innerHTML = "";
if (oneTimeMsgClikced == false) {
alert("successful");
oneTimeMsgClikced = true;
}
}
}
</script>
// HTML代碼
<body>
<div id="error" style="position: absolute; left: auto; top: 7px;">
Errors here
</div>
<div style="position: absolute; left: auto; top: 25px;">
First name:
<input type="text" id="fname" name="fname" onblur="requiredFields()" />
<br />
Last name:
<input type="text" id="lname" name="lname" onblur="requiredFields()"/>
<br />
<input type="submit" value="Submit" onclick="requiredFields()" />
</div>
</body>
這是一種使用比內聯事件處理程序更現代的方法的方法(例如, onchange=""
)。 正如您將看到的,這是由data-
屬性驅動的,雖然它目前沒有配置為處理input[type=text]
以外的任何內容,但它可以擴展為使用select
s, textarea
等。
由於這些版本使用attachEvent
而不是addEventListener
來設置事件處理程序,因此下面的內容不會使用IE8及更低版本。 同樣,這可以使用,但它確實適用於所有其他現代瀏覽器。 它應該在IE9中工作,盡管這是未經測試的。
它可能看起來很多,但看看它,看看你是否可以弄清楚它是如何運作的。 請隨意問我喜歡的任何問題。
這是一個小提琴(在Chrome和Firefox中測試):
HTML
<aside>
<ol id="errors"></ol>
</aside>
<section id="signup">
<form action="#">
<p>
<label for="fname">First Name:</label>
<span>
<input type="text" id="fname" name="fname" class="required"
data-validate-error="First name may not be empty."
data-error-sort="0"/>
</span>
</p>
<p>
<label for="lname">Last name:</label>
<span>
<input type="text" id="lname" name="lname" class="required"
data-validate-error="Last name may not be empty."
data-error-sort="1"/>
</span>
</p>
<p>
<label for="addr1">Address 1:</label>
<span>
<input type="text" id="addr1" name="addr1" class="required"
data-validate-error="Address may not be empty."
data-error-sort="2"/>
</span>
</p>
<p>
<label for="addr2">Address 2:</label>
<span><input type="text" id="addr2" name="addr2"/></span>
</p>
<p>
<label for="city">City:</label>
<span>
<input type="text" id="city" name="city" class="required"
data-validate-error="City may not be empty."
data-error-sort="3"/>
</span>
</p>
<p>
<label for="state">State:</label>
<span>
<input type="text" id="state" name="state" class="required"
data-validate-error="State may not be empty."
data-error-sort="4"/>
</span>
</p>
<p>
<span></span>
<span style="text-align: right;">
<input type="submit" value="Submit"/>
</span>
</p>
</form>
</section>
CSS
#signup {
display: table;
}
#signup form > p {
display: table-row;
}
#signup p > label,
#signup p > span {
display: table-cell;
font-weight: bold;
padding: 5px;
}
#signup p > label {
text-align: right;
width: 150px;
}
.validationerror input {
border: 1px solid #a00;
background-color: #ffd;
padding: 2px 1px;
}
.validationerror:after {
content: '!';
}
使用Javascript
window.addEventListener('load', function init(){
var signup = document.getElementById('signup'),
fields = signup.getElementsByClassName('required'),
errors = document.getElementById('errors'),
error = '<li>{error}</li>',
submitted = false,
errorlog = [],
index = 0,
field,
focusin;
signup.addEventListener('submit', validateform);
while (field = fields[index++]) {
field.addEventListener('blur', validatefield);
field.addEventListener('keyup', validatefield);
}
function validatefield() {
var message = this.dataset['validateError'],
sort = this.dataset['errorSort'],
parent = this.parentNode;
if (this.value === '' && (message && sort)) {
errorlog[sort] = error.replace('{error}', message);
parent.className += ' validationerror';
if (!focusin) {
focusin = this;
}
} else if (this.value !== '' && (message && sort)) {
delete errorlog[sort];
parent.className = parent.className.replace('validationerror', '');
if (focusin == this) {
focusin = null;
}
}
if (!submitted) {
isvalid();
}
}
function validateform(event) {
index = 0;
errorlog = [];
focusin = null;
submitted = true;
while (field = fields[index++]) {
callevt(field, 'focus');
callevt(field, 'blur');
}
submitted = false;
if (!isvalid()) {
if (focusin) {
focusin.focus();
}
focusin = null;
event.preventDefault();
return false;
}
}
function isvalid() {
errors.innerHTML = '';
if (errorlog.length) {
errors.innerHTML = errorlog.join('');
return false;
}
return true;
}
function callevt(el, type) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(type, true, true);
el.dispatchEvent(evt);
}
});
您不應該使用onclick事件處理程序進行提交。
對於實時驗證,您可以使用onblur,將其插入輸入框。 這將在您每次離開輸入字段時驗證輸入。
你可以試試這個:
<script>
function checkFName()
{
fName = document.getElementById("fname").value;
if(fName == ""){
document.getElementById("error").innerHTML = "First name field cannot be empty";
document.getElementById("fname").focus;
return false;
}
}
function checkLName()
{
lname = document.getElementById("lname").value;
if(lname == ""){
document.getElementById("error").innerHTML = "Last name field cannot be empty";
document.getElementById("lname").focus;
return false;
}
}
</script>
<div id="error" style="position:absolute; left:auto; top:7px;"></div>
<div style="position:absolute; left:auto; top:25px;">
First name: <input type="text" id="fname" name="fname" onchange="checkFName();"><br>
Last name: <input type="text" id="lname" name="lname" onchange="checkLName();"><br>
<input type="submit" value="Submit"><div>
希望這會有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.