首页 > 编程笔记 > JavaScript笔记 > JS正则表达式 阅读:101

JS正则表达式验证form表单

本示例将利用 HTML 表单内建校验机制,设计一个表单验证。

1) 新建 HTML5 文档,设计一个 HTML5 表单页面。
<form method="post" action="" name="myform" class="form" >
    <label for="user_name">真实姓名<br />
        <input id="user_name" type="text" name="user_name" required patten="^([\u4e00-\u9fa5] + | ([a-z]+\s?)+)$" />
    </label><br />
    <label for="user_item">比赛项目<br />
        <input list="ball" id="user_item" type="text" name="user_item" required/>
    </label>
    <datalist id="ball">
        <option value="篮球"/>
	<option value="羽毛球"/>
	<option value="桌球"/>
    </datalist><br />
    <label for="user_email">电子邮箱<br />
        <input id="user_email" type="email" name="user_email" pattern="^[0-9a-z][a-z0-9\._-]{1,}@[a-z0-9-]{1,}[a-z0-9]\.[a-z\.]{1,}[a-z]$" required/>
    </label><br />
    <label for="user_phone">手机号码<br />
        <input id="user_phone" type="tel" name="user_phone" pattern="^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$" required/>
    </label><br />
    <label for="user_id">身份证号<br />
        <input id="user_id" type="text" name="user_id" required pattern="^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$" />
    </label><br />
    <label for="user_born">出生年月<br />
        <input id="user_born" type="month" name="user_born" required />
    </label><br />
    <label for="user_rank">名次期望<span>第<em id="ranknum">5</em>名</span></label><br />
    <input id="user_rank" type="range" name="user_rank" value="5" min="1" max="10" step="1" required /> <br />
    <button type="submit" name="submit" value="提交表单">提交表单</button>
</form>
显示结果如图所示:


2) 设计表单控件的验证模式。“真实姓名”选项为普通文本框,要求必须输入 required,验证模式为中文字符。
pattern = "^(\u4e00-\u9fa5]+|([a-z]+\s?)+)$"
“比赛项目”选项设计一个数据列表,使用 datalist 元素设计,并使用 list="ball" 绑定到文本框上。

3) “电子邮箱”选项设计 type="email" 类型,同时使用如下匹配模式兼容老版本浏览器。
pattern = "^[0-9a-z][a-z0-9\._-]{1,}@[a-z0-9-]{1,}[a-z0-9]\.[a-z\.]{1,}[a-z]$"

4) “手机号码”选项设计 type="tel" 类型,同时使用如下匹配模式兼容老版本浏览器。
pattern = "^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$"

5) “身份证号”选择使用普通文本框设计,要求必须输入,定义匹配模式如下:
pattern = "^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d|3[0-1])\d{3}([0-9]|X)$"

6) “出生年月”选项设计 type="month" 类型,这样就不需要进行验证,用户必须在日期选择器面板中进行选择,无法作弊。

7) “名次期望”选项设计 type="range" 类型,限制用户只能在 1~10 之间进行选择。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章