1页面 index.jsp
2效果如下：
[img]http://dl.iteye.com/upload/attachment/0070/6772/6511d2ac-0190-3a87-8c22-6598f47f4959.jpg[/img]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
<head>
<title>formvalidator.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="formValidator/css/validationEngine.jquery.css" type="text/css" />
<link rel="stylesheet" href="formValidator/css/template.css" type="text/css" />
<script src="formValidator/jquery.js" type="text/javascript"></script>
<script src="formValidator/js/jquery.validationEngine-cn.js" type="text/javascript"></script>
<script src="formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#formID").validationEngine({
validationEventTriggers:"blur", //触发的事件 validationEventTriggers:"keyup blur",
inlineValidation: true,//是否即时验证，false为提交表单时验证,默认true
success : false,//为true时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false
promptPosition: "topRight",//提示所在的位置，topLeft, topRight, bottomLeft, centerRight, bottomRight
//failure : function() { alert("验证失败，请检查。"); }//验证失败时调用的函数
//success : function() { callSuccessFunction() },//验证通过时调用的函数
});
});
</script>
</head>
<body>
<form id="formID" class="formular" method="post" action="">
<fieldset>
<legend>User informations</legend>
<label>
<span>Desired username (ajax validation, only karnius is available) : </span>
<input value="" class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" type="text" name="user" id="user" />
</label>
<label>
<span>First name (optional)</span>
<input value="karnius" class="validate[optional,custom[onlyLetter],length[0,100]] text-input" type="text" name="firstname" id="firstname" />
</label>
<label>
<span>Last name : </span>
<input value="karnius" class="validate[required,custom[onlyLetter],length[0,100]] text-input" type="text" id="data[Use6][preferedColor]" name="lastname" />
</label>
<div>
<span>Radio Groupe : <br /></span>
<span>radio 1: </span>
<input class="validate[required] radio" type="radio" name="data[User][preferedColor]" id="radio1" value="5">
<span>radio 2: </span>
<input class="validate[required] radio" type="radio" name="data[User][preferedColor]" id="radio2" value="3"/>
<span>radio 3: </span>
<input class="validate[required] radio" type="radio" name="data[User][preferedColor]" id="radio3" value="9"/>
</div>
<div>
<span>Minimum 2 checkbox : <br /></span>
<input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="data[User3][preferedColor]" value="5">
<input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="data[User3][preferedColor]" value="5">
<input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="maxcheck2" value="3"/>
<input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="maxcheck3" value="9"/>
</div>
<label>
<span>Date : (format YYYY-MM-DD)</span>
<input value="1111-11-11" class="validate[required,custom[date]] text-input" type="text" name="date" id="date" />
</label>
<label>
<span>Favorite sport 1:</span>
<select name="sport" id="sport" class="validate[required]" id="sport" >
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Favorite sport 2:</span>
<select name="sport2" id="sport2" multiple class="validate[required]" id="sport2" >
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Age : </span>
<input value="22" class="validate[required,custom[onlyNumber],length[0,3]] text-input" type="text" name="age" id="age" />
</label>
<label>
<span>Telephone : </span>
<input value="1111111" class="validate[required,custom[telephone]] text-input" type="text" name="telephone" id="telephone" />
</label>
<label>
<span>mobilephone : </span>
<input value="111111" class="validate[required,custom[mobilephone]] text-input" type="text" name="telphone" id="telphone" />
</label>
<label>
<span>chinese : </span>
<input value="asdf" class="validate[required,custom[chinese]] text-input" type="text" name="chinese" id="chinese" />
</label>
<label>
<span>url : </span>
<input value="url" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" />
</label>
<label>
<span>zipcode : </span>
<input value="zipcode" class="validate[required,custom[zipcode]] text-input" type="text" name="zipcode" id="zipcode" />
</label>
<label>
<span>ip : </span>
<input value="ip" class="validate[required,custom[ip]] text-input" type="text" name="ip" id="ip" />
</label>
<label>
<span>qq : </span>
<input value="01234" class="validate[required,custom[ip]] text-input" type="text" name="qq" id="qq" />
</label>
</fieldset>
<fieldset>
<legend>Password</legend>
<label>
<span>Password : </span>
<input value="karnius" class="validate[required,length[6,11]] text-input" type="password" name="password" id="password" />
</label>
<label>
<span>Confirm password : </span>
<input value="karnius" class="validate[required,confirm[password]] text-input" type="password" name="password2" id="password2" />
</label>
</fieldset>
<fieldset>
<legend>Email</legend>
<label>
<span>Email address : </span>
<input value="ced@hotmail.com" class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />
</label>
<label>
<span>Confirm email address : </span>
<input value="ced@hotmail.com" class="validate[required,confirm[email]] text-input" type="text" name="email2" id="email2" />
</label>
</fieldset>
<fieldset>
<legend>Comments</legend>
<label>
<span>Comments : </span>
<textarea value="ced@hotmail.com" class="validate[required,length[6,300]] text-input" name="comments" id="comments" /> </textarea>
</label>
</fieldset>
<fieldset>
<legend>Conditions</legend>
<div class="infos">Checking this box indicates that you accept terms of use. If you do not accept these terms, do not use this website : </div>
<label>
<span class="checkbox">I accept terms of use : </span>
<input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/>
</label>
</fieldset>
<input class="submit" type="submit" value="Validate & Send the form!"/>
<hr/>
</form>
</body>
</html>
2效果如下：
[img]http://dl.iteye.com/upload/attachment/0070/6772/6511d2ac-0190-3a87-8c22-6598f47f4959.jpg[/img]
扫一扫
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
