1. 程式人生 > >Jquery表單驗證圖片

Jquery表單驗證圖片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
margin: 0 auto;
margin-top: 40px;
text-align: right;
}
img {
width: 15px;
height: 23px;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
</head>
<script type="text/javascript">
//juqery程式碼
$(function() {
var flag1 = false;
var flag2 = false;
var flag3 = false;
var flag5 = false;
var flag4 = false;
$("#name").blur(function() {
$("#aa").empty();
if($(this).val().length >= 4 && $(this).val().length <= 20) {
$("#aa").append('<img src="img/dui.JPG"/>');
flag1 = true;
} else {
$("#aa").append('<img src="img/cuo.JPG"/>');
}
})
$("#pwd").blur(function() {
$("#aa1").empty();


if($(this).val().length >= 5) {
$("#aa1").append('<img src="img/dui.JPG"/>');
flag4 = true;
} else {
$("#aa1").append('<img src="img/cuo.JPG"/>');
}
})
$("#pwds").blur(function() {


$("#aa2").empty();
if($("#pwds").val() == $("#pwd").val()) {
$("#aa2").append('<img src="img/dui.JPG"/>');
flag2 = true;
} else {
$("#aa2").append('<img src="img/cuo.JPG"/>');
}
})
$("#emo").blur(function() {
$("#aa3").empty();
var emo = $("#emo").val();
var myreg = /^([\.a-zA-Z0-9_-])

[email protected]([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(!myreg.test(emo)) {
$("#aa3").append('<img src="img/cuo.JPG"/>');
} else {
$("#aa3").append('<img src="img/dui.JPG"/>');
flag3 = true;
}
})
$("#call").blur(function() {
$("#aa4").empty();
if($(this).val().length >=11) {
$("#aa4").append('<img src="img/dui.JPG"/>');
flag5 = true;
} else {
$("#aa4").append('<img src="img/cuo.JPG"/>');
}
})

});
</script>
<body>
<table border="0px" cellspacing="0px" cellpadding="10px">
<tr>
<td>使用者名稱</td>
<td><input type="text" id="name" />
</td>
<td>
<span id="aa"></span>
</td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" id="pwd" /></td>
<td>
<span id="aa1"></span>
</td>
</tr>
<tr>
<td>確認密碼</td>
<td><input type="password" id="pwds" /></td>
<td>
<span id="aa2"></span>
</td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="text" id="emo" /></td>
<td>
<span id="aa3"></span>
</td>
</tr>
<tr>
<td>手機號</td>
<td><input type="text" id="call" /></td>
<td>
<span id="aa4"></span>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><button style="width: 100px;">提交</button></td>
</tr>
</table>
</body>
</html>

相關推薦

Jquery驗證圖片

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">table {ma

簡單的jquery驗證

append 提交 ren pre img als pri button font <tr>

前端——JQuery驗證插件

params brush xxx pass java blog scrip ida red 1、引入JQuery插件(依賴JQuery) <script src="js/jquery-1.11.3.min.js" type="text/javascript">

jquery驗證10章

attr inner 不能 att length parent created create plus 淘寶網購物車: /** * Created by MLQ on 2018/04/12. */ $(function () { $("img[

jquery驗證

ger clas remove col for 郵箱 追加 重置 UNC 用戶名: 郵箱: 個人資料: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

jquery驗證外掛

jquery表單驗證外掛 <form id="submit_form" action="/" method="post"> <input name="headPersonPhone" class="easyui-textbox" data-options="required

jQuery 驗證控制元件 比較簡單

學習jquery, 自己寫的一個基於jQuery的表單驗證練手 比較簡單  下載地位  http://download.csdn.net/detail/lpy3654321/7816687  不要積分的 頁面效果:  HTML 程

jquery驗證框架 jquery.validate.min.js的使用

jquery表單驗證框架 jquery.validate.min.js的使用 http://www.cnblogs.com/linjiqin/p/3431835.html <form id="formId" class="form

jQuery 驗證外掛jQuery Validation Engine用法詳解

功能強大的 jQuery 表單驗證外掛,適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證,除自身擁有豐富的驗證規則外,還可以新增自定義的驗證規則。 jQuery Validatio

jQuery驗證以及ajaxForm

$(document).ready(function(){  //表單驗證  $("#projForm").validate({rules: {fullName:{                  required:true,                  remote

jQuery驗證外掛Validator的使用方法

   from表單資料的合法性驗證是個很常見的需求,jQuery提供了一個外掛:jquery validate 官網下載。    若想使用需先引用jquery.validate.js,並且要在jquery.js之後引用。 <script src="js

不是一般地好用的jquery驗證外掛-Validform

之前博主推薦過jQuery Validate,因為之前也在用,但是配置稍微顯得有些麻煩,直到最近的這個專案用到了validform,才讓我大開眼界,整個介面突然感覺太友好了,先來幾張效果圖吧。 整個過程引用的css及js非常少。 c

jQuery基礎(常用插件 驗證圖片放大鏡,自定義對象級,jQuery UI,面板折疊)

此外 cookie值 添加圖標 tor 列表 需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則,即時顯示異常信息,此外,還允許自定義驗證規則,插件調用方法如下: $(form).vali

jq中的驗證插件------jquery.validate

此外 郵箱 method 你們 ostc [0 ade 使用 js代碼 今天我們來說一下表單驗證,有人說我們在進行表單驗證的時候使用正則來驗證是非常麻煩的,現在我來給大家介紹一下表單驗證的插件:jquery.validate.min.js 它是與jquery一起結合

jquery validation驗證插件2。

back nbsp $() static 輸入 run hand get () <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

Jquery.validate.js驗證

first 博客 插件 怎麽辦 row form表單 顯示 ble logs 前言:表單驗證是十分常見的需求。公司做運維系統需要大量的編輯/新增表單,編輯之後提交,提交前需要進行表單驗證,驗證成功才能發起POST請求。由於項目前端大部分是基於Bootstrap開發的,

Jquery驗證

label red turn set tips 全部 erro ons htm <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title

jquery validate驗證

文件 json 格式 pop 第一個 tool oar blank 上傳 一、目的 為了更好地實現人機交互,使用jQuery封裝庫中的validate插件,在用戶填寫表單時,可以快速地對用戶填寫的數據進行驗證,並做出反饋。 二、validate插件簡介

jQuery之Validation驗證插件使用

urn html .org utf span con require input 詳情 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met

layer,Jquery,validate實現驗證,刷新頁面,關閉子頁面

名稱 ron primary ocl span () bsp money 新頁面 1、表單驗證            //獲取父層 var index = parent.layer.getFrameIndex(window.na