js代码

Page({
     
     
     
    /**
    * 页面的初始数据
    */
     
    data: {
     
    indicatorDots: false,
     
    autoplay: false,
     
    interval: 5000,
     
    duration: 1000,
     
    proList: null,
     
    name:"",
     
    phone:"",
     
    email:"",
     
    company:"",
     
    job:"",
     
    vip:""
     
    },
     
    // 判定输入为非空字符
     
    formSubmit: function (e) {
     
    var name = e.detail.value.name;
     
    var phone = e.detail.value.phone;
     
    // mobile
     
    var email = e.detail.value.email;
     
    var company = e.detail.value.mobile;
     
    var job = e.detail.value.job;
     
    var vip = e.detail.value.vip;
     
    if (name==""||phone==""||email==""||company==""||job==""||vip==""){
     
    wx.showModal({
     
    title: '提示',
     
    content: '请输入完整信息!',
     
    success: function (res) {
     
    if (res.confirm) {
     
    console.log('用户点击确定')
     
    }
     
    }
     
    })
     
    } else{
     
    console.log(e.detail.value)
     
    // detail
     
    }
     
    },
     
    loginBtnClick: function () {
     
    if (this.data.name.length == 0 || this.data.phone.length == 0) {
     
    this.setData({
     
    infoMess: '温馨提示:用户名和密码不能为空!',
     
    })
     
    } else {
     
    this.setData({
     
    infoMess: '',
     
    name: '用户名:' + this.data.userN,
     
    phone: '密码:' + this.data.passW
     
    })
     
    }
     
    },
     
     
     
    // 手机号部分
     
    inputPhoneNum: function (e) {
     
    let phoneNumber = e.detail.value
     
    if (phoneNumber.length === 11) {
     
    let checkedNum = this.checkPhoneNum(phoneNumber)
     
    }
     
    },
     
    checkPhoneNum: function (phoneNumber) {
     
    let str = /^1\d{10}$/
     
    if (str.test(phoneNumber)) {
     
    return true
     
    } else {
     
    wx.showToast({
     
    title: '手机号不正确',
     
    image: './../../../../images/fail.png'
     
    })
     
    return false
     
    }
     
    },
     
    // 邮箱验证部分
     
    inputemail: function (e) {
     
    let email = e.detail.value
     
    let checkedNum = this.checkEmail(email)
     
    },
     
    checkEmail: function (email) {
     
    let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
     
    if (str.test(email)) {
     
    return true
     
    } else {
     
    wx.showToast({
     
    title: '请填写正确的邮箱号',
     
    image: './../../../../images/fail.png'
     
    })
     
    return false
     
    }
     
    }
     
    })

wxml代码:

<form bindsubmit='formSubmit'>
     
        <view class='form'>
     
        <text class='label'>姓名<text class='red'>(必填)</text></text>
     
        <input class='int' name="name"></input>
     
        <text class='label'>手机<text class='red'>(必填)</text></text>
     
        <input class='int'name="phone" type="number" maxlength="11" bindinput="inputPhoneNum"></input>
     
        <text class='label'>邮箱<text class='red'>(必填)</text></text>
     
         <input class='int' name="email" bindchange="inputemail" ></input>
     
         <text class='label' >单位<text class='red'>(必填)</text></text>
     
         <input class='int' name="company" ></input>
     
         <text class='label' >职务<text class='red'>(必填)</text></text>
     
             <input class='int' name="job"></input>
     
        </view>
     
        <button class='submit' formType="submit" type="primary" >提交</button>
     
    </form>

注解:

手机号为输入11个数字触发事件。

邮箱为失去焦点触发事件。

正则表达式/  /,格式注意。
---------------------
作者:Thea12138
来源:CSDN
原文:https://blog.csdn.net/Thea12138/article/details/80507133
版权声明:本文为博主原创文章,转载请附上博文链接!

微信小程序 --- 表单输入验证(手机号、邮箱验证、输入非空)的更多相关文章

  1. 微信小程序——表单验证插件WxValidate的二次封装(终极版)

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

  2. 微信小程序——表单验证插件WxValidate的二次封装(二)

    在上一篇博客<微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装>中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面 ...

  3. 微信小程序 - 表单验证插件WxValidate使用

    插件下载地址及官方文档:https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/w ...

  4. 微信小程序 - 表单验证插件WxValidate(自定义警告信息形式)

    弹出的形式对于用户来说,总是不太友好的 可能会出现层级问题(只需要设置一下提示的层级即可) WxValidate内置规则 以下代码拷贝即可使用~ wxml <form bindsubmit='s ...

  5. 微信小程序-表单组件

    button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...

  6. 微信小程序-表单

    wxml <view> 按钮: <button size="{{buttom.size}}" type="{{buttom.type}}" p ...

  7. 微信小程序-表单笔记

    发布页——向云端数据库上传多行文字和4张图片 第6,8行注释掉和不注释掉都可以实现数据上传 var _this = this; wx.cloud.callFunction({ name: 'searc ...

  8. 微信小程序-表单笔记2

    本地添加4张图片并显示至页面——组件位置.设置样式.列表渲染 Q.button是一张图片,需要实现点击这张图片后选择本地图片后显示至页面,不知道怎么让本地图片将button挤到右边  S.在wxml中 ...

  9. 小程序 表单 获取 formId

    微信小程序使用模板消息需要使用支付prepay_id或表单提交formId, 要获得 formId 需要在 form 标签中声明属性    report-submit="true" ...

随机推荐

  1. 第16月第26天 /bin/bash^M: bad interpreter: 没有那个文件或目录

    1. 运行脚本时出现了这样一个错误,打开之后并没有找到所谓的^M,查了之后才知道原来是文件格式的问题,也就是linux和windows之间的不完全兼容...具体细节不管,如果验证: vim test. ...

  2. python Twisted安装报错

    系统 mac pro 错误信息: IOError: [Errno 63] File name too long: '/var/folders/72/byjy11cs0dj_z3rjtxnj_nn000 ...

  3. UML 类图 说明

    继承关系用空心三角形+实线来表示 关联:就是属性 聚合: 合成:组成 依赖:作为参数存在

  4. 论文笔记系列-Efficient Neural Architecture Search via Parameter Sharing

    Summary 本文提出超越神经架构搜索(NAS)的高效神经架构搜索(ENAS),这是一种经济的自动化模型设计方法,通过强制所有子模型共享权重从而提升了NAS的效率,克服了NAS算力成本巨大且耗时的缺 ...

  5. MySQL内连接、外连接、交叉连接

    外连接: 左连接:left join 或 left outer join 以左边的表为基准,如果左表有数据,而右表没有数据,左表的数据正常显示,右表数据显示为空. 创建user表,用于记录用户 use ...

  6. UML和模式应用5:细化阶段(8)---逻辑架构和UML包图

    1.前言 本章是从面向分析的工作过度到软件设计 典型的OO系统设计的基础是若干架构层,如UI层.应用逻辑(领域)层 本章简要考察逻辑分层架构和相关UML表示法 2.逻辑架构和层 逻辑架构 逻辑架构是软 ...

  7. bat判断ini文件内容

    @echo off for /f "tokens=1" %%d in (config.ini) do ( if /I "%%d" equ "path= ...

  8. SharePoint 2013 文档库“样式”变了

    有朋友反馈说文档库的样式变了. 经查证,原来有人修改了视图的"样式":库设置—视图—样式,改为默认即可. 另外,如果编辑页面,编辑web部件的属性,在"杂项"勾 ...

  9. [BZOJ3295] [Cqoi2011]动态逆序对(带修改主席树)

    题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...

  10. 如何判断mac地址时multicast还是broadcast ?

    ethernet 的地址其实就是mac地址,长度为6 byte,其中有一位为 multicast bit 位. 当unicast/multicast bit 位置1时就是 multicast,mac ...