今天晚上用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. js生成指定范围的随机整数

    定义一个random()函数,原理是 随机数和最大值减最小值的差相乘 最后再加上最小值. function random(min, max) { return Math.floor(Math.rand ...

  2. 用c#实现编写esp32单片机获取DHT11温度传感器参数

    欢迎爱好c#的爱好者,本文章我们将用C#的nanoframework框架来编写获取esp32单片机上的DHT11传感器的温度和湿度 实现我们需要准备配置好esp32的环境可以看看之前写的esp32搭建 ...

  3. 在海外上传文件到中国AWS S3

    s3cmd --access_key= --secret_key=xxxx --region=cn-north-1 --host=s3.cn-north-1.amazonaws.com.cn --ho ...

  4. redis与集群实用操作笔记

    redis哨兵 部署方式 redis配置 首先需要区分的是主从redis,主机也就是用来写的机器,从机是从来读的,为主机分担压力,与集群不同的是redis哨兵不可通过从机写入数据同步到主机,但是也可以 ...

  5. JVM内存模型（五）

    一.JVM内存模型 1.1.与运行时数据区     前面讲过了运行时数据区那接下来我们聊下内存模型,JVM的内存模型指的是方法区和堆:在很多情况下网上讲解会把内存模型和运行时数据区认为是一个东西,这是 ...

  6. Velero：备份、迁移Kubernetes集群资源和PV

    Velero基本介绍 官方文档:https://velero.io/docs/v1.4/ 基本工作原理: 不管需求是实现什么,比如:集群迁移.恢复.备份,其核心都是通过velero client CL ...

  7. [HNOI2009]双递增序列

    不难发现本题贪心是不好做的,可以考虑 \(dp\). 首先的一个想法就是令 \(dp_{i, j, k, l}\) 表示当前选到第 \(i\) 个位置,当前第一个序列选了 \(j\) 个数,当前第一个 ...

  8. JVM学习五：性能监控工具

    一.系统性能监控 系统性能工具用于确定系统运行的整体状态,基本定位问题所在. Linux – uptime • 系统时间 • 运行时间 n 例子中为7分钟 • 连接数 n 每一个终端算一个连接 • 1 ...

  9. Android 四种方法写按钮点击事件

    1.匿名内部类的方式 2. 创建一个类实现onclickListener,实现onclick方法,设置控件点击事件时传一个类的对象. 3. 让当前类实现onclickListener,设置控件点击事件 ...

  10. Haproxy配合Nginx搭建Web集群部署

    Haproxy配合Nginx搭建Web集群部署实验 1.Haproxy介绍 2.Haproxy搭建 Web 群集 1.Haproxy介绍: a)常见的Web集群调度器: 目前常见的Web集群调度器分为 ...