今天晚上用layui模板做了一个简单的注册表单，功能主要有可以js验证密码重复，可以验证手机号码。

这是界面

下面是我的html文件代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="layui/css/layui.css" media="all">

</head>

<body>

<form class="layui-form" action="register?method1=register" method="post">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

        <legend>用户注册</legend>

    </fieldset>

    <div class="layui-form-item">

        <label class="layui-form-label">姓名</label>

        <div class="layui-input-inline">

            <input type="text" name="username" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">密码</label>

        <div class="layui-input-inline">

            <input type="password" id="pwd1"  name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

        </div>

        <div class="layui-form-mid layui-word-aux">辅助文字</div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">重复密码</label>

        <div class="layui-input-inline">

            <input type="password" id="pwd2" onkeyup="validate()" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">手机号</label>

        <div class="layui-input-inline">

            <input type="text" name="phone" id="phone" onblur="isPhone(this.value)" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">单位</label>

        <div class="layui-input-inline">

            <select name="work" lay-verify="required">

                <option value=""></option>

                <option value="政府机构">政府机构</option>

                <option value="个体户">个体户</option>

            </select>

        </div>

    </div>

    <div class="layui-form-item">

        <div class="layui-input-block">

            <input class="layui-btn" type="submit" value="立即提交"></input>

            <button type="reset" class="layui-btn layui-btn-primary">重置</button>

        </div>

    </div>

</form>

<script src="layui/layui.all.js" charset="utf-8"></script>

<script>

    //Demo

    function validate() {

        var pwd1 = document.getElementById("pwd1").value;

        var pwd2 = document.getElementById("pwd2").value;

        <!-- 对比两次输入的密码 -->

        if(pwd1!=pwd2) {

            alert("两次密码输入不同");

            document.getElementById('pwd2').value="";

        }

    }

    function isPhone(card)

    {

        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X

        var reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

        if(reg.test(card) === false)

        {

            alert("电话号码输入有误!");

            document.getElementById('phone').value="";

        }

    }

    layui.use('form', function(){

        var form = layui.form;

    });

</script>

</body>

</html>

layui模板注册表单的更多相关文章

  1. 免费 PSD 下载： 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  2. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  3. Ruby Rails学习中：注册表单，注册失败，注册成功

    接上篇 一. 注册表单 用户资料页面已经可以访问了, 但内容还不完整.下面我们要为网站创建一个注册表单. 1.使用 form_for 注册页面的核心是一个表单, 用于提交注册相关的信息(名字.电子邮件 ...

  4. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  5. HTML6注册表单输入日志标题

    一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...

  6. form注册表单圆角 demo

    form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...

  7. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. UX设计秘诀之注册表单设计，细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

  9. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

随机推荐

  1. UncLutter

    在 Mac 上「速记」的正确姿势:Unclutter 现代人的大脑,每天都会被大量有用,或无用的东西充斥着,过多「思想垃圾」的沉重负担就容易导致失忆.也就是说,你很可能会记得一个无关紧要,但给你留下深 ...

  2. Django settings.py配置文件

    import os BASE_DIR = os.path.dirname(os.path.dirname(__file__)) 这里用到了python中一个神奇的变量 file 这个变量可以获取到当前 ...

  3. 微服务架构 | 4.2 基于 Feign 与 OpenFeign 的服务接口调用

    目录 前言 1. OpenFeign 基本知识 1.1 Feign 是什么 1.2 Feign 的出现解决了什么问题 1.3 Feign 与 OpenFeign 的区别与对比 2. 在服务消费者端开启 ...

  4. BIMFACE 二次开发 SDK 之歌

    <BIMFACE SDK 之歌>讲述了作者与 BIMFACE 从相识.相知.相爱.相守的艳遇之爱唯美故事   我是一个小小的程序员 穿行在人来人往的IT行业之间 编程工作与建筑信息化相关 ...

  5. Network Kit与三七游戏共创流畅游戏体验，无惧网络延迟

    本文分享于HMS Core联盟论坛<[开发者说]无惧高网络吞吐量,HMS Core Network Kit与三七游戏共创流畅游戏体验>的采访整理. 三七游戏拥有<斗罗大陆·魂师对决& ...

  6. 入门-k8s部署应用 （三）

    Kubernetes 部署应用 在 k8s 上进行部署前,首先需要了解一个基本概念 Deployment Deployment 译名为 部署.在k8s中,通过发布 Deployment,可以创建应用程 ...

  7. 超详细的node/v8/js垃圾回收机制

    前言 垃圾回收器是一把十足的双刃剑.其好处是可以大幅简化程序的内存管理代码,因为内存管理无需程序员来操作,由此也减少了(但没有根除)长时间运转的程序的内存泄漏.对于某些程序员来说,它甚至能够提升代码的 ...

  8. ubuntu关机重启命令介绍

    转载请注明来源:https://www.cnblogs.com/hookjc/ 重启命令: 1.reboot    2.shutdown -r now 立刻重启(root用户使用)    3.shut ...

  9. 如何将VSCode配置上传到gitee账户，简单几步教你实现

    众所周知,VSCode是一款功能非常强大的代码编写软件,不仅开源免费,其插件商店也是非常广泛.非常之强大.借助这些插件我们可以配置各种语言环境,也可以运行各种代码. 但随之就有问题出现了,我们在更换设 ...

  10. 基于GDAL库，读取.grd文件（以海洋地形数据为例）Java版

    技术背景 海洋地形数据主要是通过美国全球地形起伏数据(GMT)获得,数据格式为grd(GSBG)二进制数据,打开软件通过是Surfer软件,surfer软件可进行数据的编辑处理,以及进一步的可视化表达 ...