Go Back   Diễn Đàn Bo-Blog Việt Nam > Phụ Trợ Bo-Blog > Ứng Dụng HTML - Java - Ajax Cho Bo-blog



About Me
Your Avatar

 
Trả lời Gởi Ðề Tài Mới
 
Ðiều Chỉnh Kiếm Trong Bài
  #1  
Old 31-03-2010, 01:31 PM
JavaScriptBank's Avatar
JavaScriptBank is offline
Junior Member
 
Tham gia ngày: Mar 2010
Bài gởi: 12
Default Kiểm tra dữ liệu của biểu mẫu

Bạn có thể dùng đoạn mã JavaScript này để kiểm tra dữ liệu do người dùng nhập vào trong một chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes


Cách cài đặt

Bước 1: Mã CSS bên dưới dùng cho định dạng hiệu ứng, hãy copy nó vào phần HEAD của web
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: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
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 bên dưới về
Files
chkform.js



Các hiệu ứng tương tự
- Kiểm tra thông tin trình duyệt
- Kiểm tra trạng thái trực tuyến của trang
- Kiểm tra độ phân giải màn hình


Một vài nhãn tương tự: kiểm tra, dữ liệu, biểu mẫu, trạng thái, CapsLock, chuỗi, thư điện tử, mật khẩu, điện thoại, kí tự, số lượng
Bạn có thể xem thêm nhiều JavaScript khác về Biểu mẫuHạn chế




Trả Lời Với Trích Dẫn
Trả lời Gởi Ðề Tài Mới

Tags
biểu, của, dữ, kiểm, liệu, mẫu, tra

Ðiều Chỉnh Kiếm Trong Bài
Kiếm Trong Bài:

Kiếm Chi Tiết

Chuyển đến


Múi giờ GMT. Hiện tại là 12:11 PM.
Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
vdata

Bo-Blog Việt Nam

Bo-blog
9.9 10 13259