JavaScriptBank
30-03-2010, 11:32 PM
Bạn có thể dùng đoạn mã JavaScript (http://www.javascriptbank.com/javascript/) này để kiểm tra (http://www.javascriptbank.com/vi+title=kiểm tra) dữ liệu do người dùng nhập vào trong một chi tiết (http://www.javascriptbank.com/javascr... http://www.javascriptbank.com/javascript.images/form/extreme-form-field-validator.jpg (http://www.javascriptbank.com/javascript/form/validation-limitation/extreme-form-field-validator/preview/vi/)
Demo: JavaScript Kiểm tra dữ liệu của biểu mẫu (http://www.javascriptbank.com/extreme-form-field-validator.html/vi/)
| JavaScript Extreme Form Field Validator (http://www.javascriptbank.com/extreme-form-field-validator.html)[/CENTER]
[U]Cách cài đặt
Bước 1: Copy mã CSS bên dưới và dán vào khu vực HEAD trên trang web của bạn
CSS
<style>
#errordiv {
border: 1px solid red;
background-color: #FFAFAF;
display: none;
width: 50%;
margin: 5px;
padding: 5px;
}
.required {
background-color: #CC4444;
}
.required:focus {
background-color: #fff;
border: 1px solid #f00;
}
.checkit {
background-color: #E0E5EF;
}
</style>
Bước 2: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript
<script type="text/javascript" src="chkform.js"></script><script type="text/javascript">
function configureValidation(f,alerttype){
f.firstname.isAlphaNumeric = true;
f.lastname.isAlphaNumeric = true;
f.email.isEmail = true;
f.phone.isPhoneNumber = true;
f.birthday.isDate = true;
f.postalcode.isEmpty = true;
f.password1.isLengthBetween = [4,255];
f.password2.isMatch = f.password1.value;
f.comments.optional = true;
var preCheck = (!f.infohtml.checked && !f.infocss.checked && !f.infojs.checked) ? errormsg[0] : null;
return validateForm(f, preCheck, 'required', alerttype);
}
</script>
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<div>
<form action="#" method="post" onsubmit="return configureValidation(this,3)" onreset="confirm(errormsg[99])">
<table class="formtable">
<tr>
<td>First Name:</td>
<td><input class="checkit" type="text" id="First name" name="firstname" value="" class="text"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input class="checkit" type="text" id="Last name" name="lastname" value="" class="text"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="checkit" type="text" id="Email" name="email" value="" class="text"></td>
</tr>
<tr>
<td>Email Preferred:</td>
<td><select name="emailpreferred">
<option value="text">Text</option>
<option value="html">HTML</option>
<option value="flash">Flash</option>
</select></td>
</tr>
<tr>
<td>Phone: (US only) </td>
<td><input class="checkit" type="text" id="Phone" name="phone" value="000-000-0000" class="text"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input class="checkit" type="text" id="Birthday" name="birthday" value="mm-dd-yyyy" class="text"></td>
</tr>
<tr>
<td>Gender:</td>
<td>Male:<input type="radio" name="gender" value="male" class="radio" checked="checked"> Female:<input type="radio" name="gender" value="female" class="radio"></td>
</tr>
<tr>
<td>Password:</td>
<td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password" type="password" name="password1" value="" class="text"></td>
</tr>
<tr>
<td>Re-Enter:</td>
<td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password again" type="password" name="password2" value="" class="text"></td>
</tr>
<tr>
<td>Postal Code</td>
<td><input class="checkit" name="postalcode" type="text" id="Postal code" onKeyPress="javascript:checkNumber(this);" onKeyUp="javascript:checkNumber(this);"></td>
</tr>
<tr>
<td colspan="2">Select one or more of the following:</td>
</tr>
<tr>
<td colspan="2">HTML:<input type="checkbox" name="infohtml" value="true" class="checkbox"> CSS:<input type="checkbox" name="infocss" value="true" class="checkbox"> JavaScript:<input type="checkbox" name="infojs" value="true" class="checkbox"></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea id="Comment" name="comments" class="text" cols="20" rows="4"></textarea></td>
</tr>
</table>
<div id="errordiv"> </div>
<div>
<input type="submit" name="submit" value="Submit" class="button"> <input type="reset" name="reset" value="Reset" class="button"></td>
</form>
</div>
Bước 4: tải các file
Files
chkform.js (http://www.javascriptbank.com/javascript/form/Extreme_Form_Field_Validator/chkform.js)
Các hiệu ứng tương tự
- Kiểm tra thông tin trình duyệt (http://www.javascriptbank.com/browser-sniffer-script-ver-1-1.html/vi/)
- Kiểm tra trạng thái trực tuyến của trang (http://www.javascriptbank.com/online-offline-page-checker-script.html/vi/)
- Kiểm tra độ phân giải màn hình (http://www.javascriptbank.com/detecting-screen-browser-resolution.html/vi/)
Một vài nhãn tương tự: kiểm tra (http://www.javascriptbank.com/vi+tag=kiểm tra), dữ liệu (http://www.javascriptbank.com/vi+tag=dữ liệu), biểu mẫu (http://www.javascriptbank.com/vi+tag=biểu mẫu), trạng thái (http://www.javascriptbank.com/vi+tag=trạng thái), CapsLock (http://www.javascriptbank.com/vi+tag=CapsLock), chuỗi (http://www.javascriptbank.com/vi+tag=chuỗi), thư điện tử (http://www.javascriptbank.com/vi+tag=thư điện tử), mật khẩu (http://www.javascriptbank.com/vi+tag=mật khẩu), điện thoại (http://www.javascriptbank.com/vi+tag=điện thoại), kí tự (http://www.javascriptbank.com/vi+tag=kí tự), số lượng (http://www.javascriptbank.com/vi+tag=số lượng)
Bạn có thể xem thêm nhiều JavaScript khác về Biểu mẫu (http://www.javascriptbank.com/javascript/form/vi/) và Hạn chế (http://www.javascriptbank.com/javascript/form/validation-limitation/vi/)
Menu trượt ở đầu trang web (http://www.javascriptbank.com/javascript/menu/floatable/vi/) - Code tuyết rơi (http://www.javascriptbank.com/vi+title=tuyết rơi) - Hiệu ứng ảnh mờ ảo bằng JavaScript (http://www.javascriptbank.com/vi=ảnh mờ ảo)
Demo: JavaScript Kiểm tra dữ liệu của biểu mẫu (http://www.javascriptbank.com/extreme-form-field-validator.html/vi/)
| JavaScript Extreme Form Field Validator (http://www.javascriptbank.com/extreme-form-field-validator.html)[/CENTER]
[U]Cách cài đặt
Bước 1: Copy mã CSS bên dưới và dán vào khu vực HEAD trên trang web của bạn
CSS
<style>
#errordiv {
border: 1px solid red;
background-color: #FFAFAF;
display: none;
width: 50%;
margin: 5px;
padding: 5px;
}
.required {
background-color: #CC4444;
}
.required:focus {
background-color: #fff;
border: 1px solid #f00;
}
.checkit {
background-color: #E0E5EF;
}
</style>
Bước 2: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript
<script type="text/javascript" src="chkform.js"></script><script type="text/javascript">
function configureValidation(f,alerttype){
f.firstname.isAlphaNumeric = true;
f.lastname.isAlphaNumeric = true;
f.email.isEmail = true;
f.phone.isPhoneNumber = true;
f.birthday.isDate = true;
f.postalcode.isEmpty = true;
f.password1.isLengthBetween = [4,255];
f.password2.isMatch = f.password1.value;
f.comments.optional = true;
var preCheck = (!f.infohtml.checked && !f.infocss.checked && !f.infojs.checked) ? errormsg[0] : null;
return validateForm(f, preCheck, 'required', alerttype);
}
</script>
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<div>
<form action="#" method="post" onsubmit="return configureValidation(this,3)" onreset="confirm(errormsg[99])">
<table class="formtable">
<tr>
<td>First Name:</td>
<td><input class="checkit" type="text" id="First name" name="firstname" value="" class="text"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input class="checkit" type="text" id="Last name" name="lastname" value="" class="text"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="checkit" type="text" id="Email" name="email" value="" class="text"></td>
</tr>
<tr>
<td>Email Preferred:</td>
<td><select name="emailpreferred">
<option value="text">Text</option>
<option value="html">HTML</option>
<option value="flash">Flash</option>
</select></td>
</tr>
<tr>
<td>Phone: (US only) </td>
<td><input class="checkit" type="text" id="Phone" name="phone" value="000-000-0000" class="text"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input class="checkit" type="text" id="Birthday" name="birthday" value="mm-dd-yyyy" class="text"></td>
</tr>
<tr>
<td>Gender:</td>
<td>Male:<input type="radio" name="gender" value="male" class="radio" checked="checked"> Female:<input type="radio" name="gender" value="female" class="radio"></td>
</tr>
<tr>
<td>Password:</td>
<td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password" type="password" name="password1" value="" class="text"></td>
</tr>
<tr>
<td>Re-Enter:</td>
<td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password again" type="password" name="password2" value="" class="text"></td>
</tr>
<tr>
<td>Postal Code</td>
<td><input class="checkit" name="postalcode" type="text" id="Postal code" onKeyPress="javascript:checkNumber(this);" onKeyUp="javascript:checkNumber(this);"></td>
</tr>
<tr>
<td colspan="2">Select one or more of the following:</td>
</tr>
<tr>
<td colspan="2">HTML:<input type="checkbox" name="infohtml" value="true" class="checkbox"> CSS:<input type="checkbox" name="infocss" value="true" class="checkbox"> JavaScript:<input type="checkbox" name="infojs" value="true" class="checkbox"></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea id="Comment" name="comments" class="text" cols="20" rows="4"></textarea></td>
</tr>
</table>
<div id="errordiv"> </div>
<div>
<input type="submit" name="submit" value="Submit" class="button"> <input type="reset" name="reset" value="Reset" class="button"></td>
</form>
</div>
Bước 4: tải các file
Files
chkform.js (http://www.javascriptbank.com/javascript/form/Extreme_Form_Field_Validator/chkform.js)
Các hiệu ứng tương tự
- Kiểm tra thông tin trình duyệt (http://www.javascriptbank.com/browser-sniffer-script-ver-1-1.html/vi/)
- Kiểm tra trạng thái trực tuyến của trang (http://www.javascriptbank.com/online-offline-page-checker-script.html/vi/)
- Kiểm tra độ phân giải màn hình (http://www.javascriptbank.com/detecting-screen-browser-resolution.html/vi/)
Một vài nhãn tương tự: kiểm tra (http://www.javascriptbank.com/vi+tag=kiểm tra), dữ liệu (http://www.javascriptbank.com/vi+tag=dữ liệu), biểu mẫu (http://www.javascriptbank.com/vi+tag=biểu mẫu), trạng thái (http://www.javascriptbank.com/vi+tag=trạng thái), CapsLock (http://www.javascriptbank.com/vi+tag=CapsLock), chuỗi (http://www.javascriptbank.com/vi+tag=chuỗi), thư điện tử (http://www.javascriptbank.com/vi+tag=thư điện tử), mật khẩu (http://www.javascriptbank.com/vi+tag=mật khẩu), điện thoại (http://www.javascriptbank.com/vi+tag=điện thoại), kí tự (http://www.javascriptbank.com/vi+tag=kí tự), số lượng (http://www.javascriptbank.com/vi+tag=số lượng)
Bạn có thể xem thêm nhiều JavaScript khác về Biểu mẫu (http://www.javascriptbank.com/javascript/form/vi/) và Hạn chế (http://www.javascriptbank.com/javascript/form/validation-limitation/vi/)
Menu trượt ở đầu trang web (http://www.javascriptbank.com/javascript/menu/floatable/vi/) - Code tuyết rơi (http://www.javascriptbank.com/vi+title=tuyết rơi) - Hiệu ứng ảnh mờ ảo bằng JavaScript (http://www.javascriptbank.com/vi=ảnh mờ ảo)