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. android 生成、pull解析xml文件

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  2. JavaScript之DOM等级概述

    这两日对DOM等级的理解不是太通透,就进Mozilla官网去看了一下,然后进行了首次的对技术文档的翻译工作,虽然官网也有中文解释,但我想,自己翻译出来时,已经有了原汁原味的理解了吧,这边是做此次翻译的 ...

  3. JavaScript之this,call,apply

    this:被调用的上下文对象: apply与call:切换被调用的上下文对象,即 调用时,this被临时性地切换 //demo 1 [call] function forEach(list,callb ...

  4. Python之Eclipse环境下安装与配置

    奔着对python的好奇,今天又是周末,欲小试Python.那么首先避不开的问题就是python的环境搭建.而我之前已经在学习Java的过程中安装了Eclipse,不想再安装更多的IDE了,就那Ecl ...

  5. CSS —— 选择器

    选择器种类 标签选择器 id选择器 类选择器 通配符 交集选择器 并集选择器 后代选择器 子代选择器 选择器设置样式优先级 默认样式 < 继承样式 < 通配符设置样式 < 标签选择器 ...

  6. 如何利用 Python 完成验签操作

    柠檬班Python8期的佑佑以及Python7期的掠掠同学昨天都私下问华华老师如何利用Python完成验签的操作. 今天我们就以佑佑的例子来跟大家进行简单的说明以及操作! 一.什么是验签: 用非常简单 ...

  7. nginx入门三

    负载均衡 upstream upstream app_server { server 127.0.0.1:8000; server 192.168.2.134:80; server 47.xx.xx. ...

  8. 深入理解CMA【转】

    转自:https://www.csdn.net/article/a/2016-07-07/15839383 摘要:连续内存分配(简称CMA) 是一种用于申请大量的,并且物理上连续的内存块的方法,在LW ...

  9. 移动端rem单位适配使用

    1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...

  10. QL Server 高可用性(一)AlwaysOn 技术

    从 SQL Server 2008 开始,微软在“高可用”.“灾难恢复”技术中使用 AlwaysOn 一词.在 SQL Server 2012 中,微软明确地打出的 AlwaysOn 招牌. SQL ...