HTML代码:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/form/jquery.tools.min.js"></script>
<form id="myform">
<fieldset>
<h3>示例注册表单</h3>
<p>
<label>电子邮件 *</label>
<input type="email" name="email" required="required" />
</p>
<p>
<label>网址 *</label>
<input type="url" name="url" required="required" />
</p>
<p>
<label>用户名 *</label>
<input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" required="required" />
</p>
<p>
<label>年龄</label>
<input type="number" name="age" size="4" min="5" max="50" />
</p>
<p>
<label>年龄(滑动)</label>
<input type="range" name="age2" size="4" min="5" max="50" />
</p>
<p id="terms">
<label>同意用户协议</label>
<input type="checkbox" required="required" />
</p>
<button type="submit">提 交</button>
<button type="reset">重 设</button>
</fieldset>
</form>
JS 代码:
$("#myform").validator();
CSS代码:
input {padding:4px; width:225px; font-family: arial, sans-serif; font-size: 12px;}
label {width: 90px; display: inline-block; text-align: right;}