跨浏览器兼容HTML5 前端表单验证演示页面

代码:

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;}
					

效果:

回到相关文章 »

示例注册表单