jquery formvalidato表单提交验证问题插件


jquery formvalidato表单提交验证问题插件
jquery formvalidato表单提交验证问题插件以及表单提交、验证问题等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script src="formValidator-4.1.1.js" type="text/javascript"></script>
<script src="formValidatorRegex.js" type="text/javascript"></script>
<script src="DateTimeMask.js" type="text/javascript"></script>
<script src="function.js" type="text/javascript"></script>

2. HTML代码

<div style="width:760px;margin:0 auto;">
<h3>jQuery formValidator表单验证插件示例</h3>
<p><strong>自动构建提示层(AutoTip):自动构建提示层。你无须自己放置div,插件自动回在校验控件后面添加提示层</strong></p>
<form action="" method="post" name="form1" id="form1"> 
	<table border="0px" style="font-size:12px" width="630px">
		<tr> 
			<td align="right">用户名:</td>
			<td><input type="text" id="us" name="us" style="width:120px" value="" /></td>
		</tr>
		<tr> 
			<td align="right">密码:</td>
			<td><input type="password" id="password1" name="password1" style="width:120px" /></td>
		</tr>
		<tr> 
			<td align="right">重复密码:</td>
			<td><input type="password" id="password2" name="password2" style="width:120px" /></td>
		</tr>
		<tr> 
			<td align="right">你的性别:</td>
			<td><input type="radio" id="sex" value="1" name="xb_one" />男&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" id="sex1" value="2" name="xb_one" />女</td>
			<td><div id="sexTip" style="width:280px"></div></td>
		</tr>
		<tr> 
			<td align="right">你的年龄:</td>
			<td><input type="text" id="nl" name="nl" style="width:120px" value="26" class="fv_input_text_default" /></td>
		</tr>
		<tr> 
			<td align="right">出生日期:</td>
			<td><input type="text" id="csny" name="csny" style="width:120px" value="1982-09-21" /></td>
		</tr>
		<tr>
			<td align="right">身份证号</td>
			<td><input name="sfzh" type="text" id="sfzh" style="width:150px" value="" /></td>
		</tr>
		<tr> 
			<td align="right">电子邮箱:</td>
			<td><input type="text" id="email" name="email" style="width:120px" /></td>
		</tr>
		<tr> 
			<td align="right">你的学历:</td>
			<td>
				<select name="xueli" id="xueli">
					<option value="">--请选择你的学历--</option>
					<option value="a">专科</option>
					<option value="b">本科</option>
					<option value="c">研究生</option>
					<option value="e">硕士</option>
					<option value="d">博士</option>
				</select>
			</td>
		</tr>
		<tr> 
			<td align="right">额外校验:</td>
			<td><input name="ewjy" type="text" id="ewjy" style="width:120px" /></td>
		</tr>
		<tr> 
			<td colspan="3">
				国家区号 <input id="Tel_country" name="Tel_country" style="width: 20px;" value="" /> - 地区区号 <input id="Tel_area" name="Tel_area" style="width: 35px;" /> - 电话号码 <input id="Tel_number" name="Tel_number" style="width: 60px;" /> - 分机号码 <input id="Tel_ext" name="Tel_ext" style="width: 30px;" />
			</td>
		</tr>
		<tr>
			<td colspan="3"><div id="teltip" style="width:280px"></div></td>
		</tr>
		<tr> 
			<td align="right">兴趣爱好1:</td>
			<td colspan="2">
				<input type="checkbox" name="xqah_one" id="qq1"/>乒乓球 
				<input type="checkbox" name="xqah_one" id="qq2" value="1" />羽毛球 
				<input type="checkbox" name="xqah_one" id="qq3" value="2" />上网 
				<input type="checkbox" name="xqah_one" id="qq4" value="3" />旅游
				<input type="checkbox" name="xqah_one" id="qq5" value="4" />购物
			</td>
		</tr>
		<tr> 
			<td colspan="3"><div id="test3Tip" style="width:350px"></div></td>
		</tr>
		<tr> 
			<td align="right">兴趣爱好2:</td>
			<td colspan="2">
				<input type="checkbox" name="xqah_more" id="pp0"/>乒乓球 
				<input type="checkbox" name="xqah_more" id="pp1" value="5" />羽毛球 
				<input type="checkbox" name="xqah_more" id="pp7" value="6" />上网 
				<input type="checkbox" name="xqah_more" id="pp8" value="7" />旅游 
				<input type="checkbox" name="xqah_more" id="pp9" value="8" />购物 
				<input type="checkbox" name="xqah_more" id="pp6" value="9" />睡觉
			</td>
		</tr>
		<tr> 
			<td colspan="3"><div id="test2Tip" style="width:350px"></div></td>
		</tr>
		<tr> 
			<td align="right">你爱国吗:</td>
			<td colspan="2">
				<input type="radio" name="aiguo" value="1" id="bb1"  />不爱 
				<input type="radio" name="aiguo" id="bb2" value="2" />不发表意见 
				<input type="radio" name="aiguo" id="nn3" value="3" />爱 
				<input type="radio" name="aiguo" id="nn4" value="4" />爱死它了
			</td>
		</tr>
		<tr> 
			<td colspan="3"><div id="aiguoTip" style="width:280px"></div></td>
		</tr>
		<tr> 
			<td align="right">手机号码:</td>
			<td><input type="text" id="shouji" name="shouji" style="width:120px" /></td>
			<td><div id="shoujiTip" style="width:280px"></div></td>
		</tr>
		<tr> 
			<td align="right">联系电话:</td>
			<td><input type="text" id="lxdh" name="lxdh" style="width:120px" /></td>
			<td><div id="lxdhTip" style="width:280px"></div></td>
		</tr>
		<tr> 
			<td align="right">手机或电话:</td>
			<td><input type="text" id="sjdh" name="sjdh" style="width:120px" /></td>
			<td><div id="sjdhTip" style="width:280px"></div></td>
		</tr>
		<tr> 
			<td align="right" valign="top">多选select控件:</td>
			<td valign="top">
			<select name="selectmore" size="3" id="selectmore" multiple>
			<option value="0">多选1</option>
			<option value="1">多选2</option>
			<option value="2">多选3</option>
			</select>(按住ctrl键多选)
			</td>
			<td><div id="selectmoreTip" style="width:280px"></div></td>
		</tr>
		<tr> 
			<td align="right" valign="top">你的描述:</td>
			<td colspan="2" valign="top"> <textarea id="ms" name="ms" cols="50" rows="10">这里是十个中文字符哦</textarea></td>
		</tr>
		<tr> 
			<td></td><td colspan="2"><div id="msTip" style="width:280px"></div></td>
		</tr>
		<tr>
			<td></td><td colspan="2"><input type="submit" name="button" id="button" value="提交" /></td>
		</tr>
	</table>
</form>
</div>

相关推荐

发表评论

相关文章