今天晚上用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. 手把手教你用Strace诊断问题

    手把手教你用Strace诊断问题 发表于2015-10-16 早些年,如果你知道有个 strace 命令,就很牛了,而现在大家基本都知道 strace 了,如果你遇到性能问题求助别人,十有八九会建议你 ...

  2. kubernetes之添加删除node

    添加node 1.master生成token [root@node-01 ~]# kubeadm token create --print-join-command kubeadm join 172. ...

  3. 分治FFT小记🐤

    分治FFT:在 $O(n \log^2 n)$ 的时间内求出类似于 $f_i=\sum\limits_{j=0}^{i-1}g(i-j)f(j)$ 之类的递推式 思想:同 CDQ 分治的思想,先分成左 ...

  4. 第09讲：Flink 状态与容错

    Flink系列文章 第01讲:Flink 的应用场景和架构模型 第02讲:Flink 入门程序 WordCount 和 SQL 实现 第03讲:Flink 的编程模型与其他框架比较 第04讲:Flin ...

  5. JavaWeb基本概念及web服务器

    1.基本概念 1.1.前言 web开发: web,网页的意思,www.baidu.com 静态web html,css 提供给所有人看的数据始终不会发生变化! 动态web 淘宝,几乎是所有的网站: 提 ...

  6. java中使用反射获取pojo（实体）类的所有字段值

    出处:https://developer.aliyun.com/article/239346 说起反射,不得不说它实在是太强大了,通过反射就可以轻轻松松拿到各种东东,如果你想在项目中解除对某个类的依赖 ...

  7. ARP协议工作原理

    转载请注明来源:https://www.cnblogs.com/hookjc/ ARP数据包根据接收对象不同,可分为两种:    1. 广播包(Broadcast).广播包目的MAC地址为FF-FF- ...

  8. Linux小技巧scp命令

    Linux服务器运维小技巧scp命令详细教程. 前言 今天给大家带来的是linux中比较实用的命令scp.善用小技巧,解决工作中的痛点. 掌握一门好的技术或者说一门好的艺术,最快捷的方式就是融入到工作 ...

  9. 生成一个node项目

    生成一个node项目1.创建文件夹2.文件夹中右键->在此处打开命令窗口->文件夹中打开dos3.执行:npm init //一路回车,最后y4.安装插件: C:\www\nodejs\h ...

  10. 如何从0到1设计一个类Dubbo的RPC框架

    之前分享了如何从0到1设计一个MQ消息队列,今天谈谈"如何从0到1设计一个Dubbo的RPC框架",重点考验: 你对RPC框架的底层原理掌握程度. 以及考验你的整体RPC框架系统设 ...