更新记录

1.0.0（2021-06-04）

请参考阅读

我此次只是单独抽离规则 ， 并不添加callback，具体的失败返回信息

请您手动添加callback内容

作为个人开发者 所写的不一定全面 如有希望补充 请留言

在接下来的反馈中，我也会逐渐补充内容 如果您不希望下载demo 可参考一下代码片段，使用的uni-ui ，作为uview的一员，我也更加推荐您使用uview来配合使用。

<template>
    <view>
        <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <uni-forms-item label="手机" name="phone">
                <uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机" />
            </uni-forms-item>
            <uni-forms-item label="纯数字" name="number">
                <uni-easyinput type="text" v-model="formData.number" placeholder="请输入数字" />
            </uni-forms-item>
            <uni-forms-item label="汉字占两个字符" name="length">
                <uni-easyinput type="text" v-model="formData.length" placeholder="请输入数字" />
            </uni-forms-item>
            <button @click="submit">提交查看信息</button>
        </uni-forms>
        <view>
          成功信息：{{successmsg}}
        </view>
        <view>
          错误信息：{{errmsg}}
        </view>
    </view>
</template>

<script>
  // 先导入你需要的 方法
  import { isPhone , isNumber , getByteLength} from "../../utils/index.js"
export default {
  data() {
    return {
      formData:{
        phone:'153980',
        number:0,
        length:'',
      },
      errmsg:null,
      successmsg:null,
      rules:{
        // 对手机号 phone字段进行必填验证
        phone:{
          rules: [{
            required: true,
            errorMessage: '请输入姓名'
          },{ //在此处自定义校验规则 
            validateFunction:function(rule,value,data,callback){
              if(isPhone(value)){
                callback()
              }else{
                callback('请根据手机校验规则输入')
              }
            }
          }]
        },
        // 对 纯数字 字段进行必填验证
        number:{
          rules: [{
            required: true,
            errorMessage: '请输入内容'
          },{
            validateFunction:function(rule,value,data,callback){
              if(isNumber(value)){
                callback()
              }else{
                callback('请输入纯数字')
              }
            }
          }]
        },
        // 对输入的字符长度进行判断 汉字占两个 数字字母算一个
        length:{
          rules: [{
            required: true,
            errorMessage: '请输入内容'
          },{
            validateFunction:function(rule,value,data,callback){
              if(getByteLength(value) > 10){
                callback()
              }else{
                callback('请输入10个以上字符')
              }
            }
          }]
        },
      }
    }
 },
  methods: {
      // 触发提交表单
      submit() {
          this.$refs.form.validate().then(res=>{
            this.successmsg = res
              console.log('表单数据信息：', res);
          }).catch(err =>{
            this.errmsg = err
              console.log('表单错误信息：', err);
          })
      }
  }
}
</script>
/**
 * @author 莫成尘 判断是否中国手机号
 */
export function isPhone(value) {
  const reg = /^1[3-9]\d{9}$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断字符长度
 * 中文算两个 字符 其他算一个
 */
 export function getByteLength(str = '') {
  let len = 0
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
      len += 2
    } else {
      len++
    }
  }
  return len
}
/**
  * @author 莫成尘 判断是否纯数字
 */
export function isNumber(value) {
  const reg = /^-?[0-9]*$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否为IP地址
 */
export function isIP(ip) {
  const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
  return reg.test(ip)
}
/**
 * @author 莫成尘 判断是否为一个url地址
 */
export function isUrl(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}
/**
 * @author 莫成尘 判断是否是小写字母
 */
export function isLowerCase(value) {
  const reg = /^[a-z]+$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否是大写字母
 */
export function isUpperCase(value) {
  const reg = /^[A-Z]+$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否数组
 */
function array(value) {
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);
    } else {
        return Object.prototype.toString.call(value) === "[object Array]";
    }
}
/**
 * @author 莫成尘 判断是否对象
 */
function object(value) {
    return Object.prototype.toString.call(value) === '[object Object]';
}
/**
 * @author 莫成尘 判断是否字符串
 */
export function isString(value) {
  return typeof value === 'string' || value instanceof String
}
/**
 * @author 莫成尘 判断是否身份证
 */
export function isIdCard(value) {
  const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否中文
 */
export function isChina(value) {
  const reg = /^[\u4E00-\u9FA5]{2,4}$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否为空
 */
export function isBlank(value) {
  return (
    value == null ||
    false ||
    value === '' ||
    value.trim() === '' ||
    value.toLocaleLowerCase().trim() === 'null'
  )
}

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 2.7.14 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ × × × × ×

请参考阅读

我此次只是单独抽离规则 ， 并不添加callback，具体的失败返回信息

请您手动添加callback内容

作为个人开发者 所写的不一定全面 如有希望补充 请留言

在接下来的反馈中，我也会逐渐补充内容 如果您不希望下载demo 可参考一下代码片段，使用的uni-ui ，作为uview的一员，我也更加推荐您使用uview来配合使用。

<template>
    <view>
        <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <uni-forms-item label="手机" name="phone">
                <uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机" />
            </uni-forms-item>
            <uni-forms-item label="纯数字" name="number">
                <uni-easyinput type="text" v-model="formData.number" placeholder="请输入数字" />
            </uni-forms-item>
            <uni-forms-item label="汉字占两个字符" name="length">
                <uni-easyinput type="text" v-model="formData.length" placeholder="请输入数字" />
            </uni-forms-item>
            <button @click="submit">提交查看信息</button>
        </uni-forms>
        <view>
          成功信息：{{successmsg}}
        </view>
        <view>
          错误信息：{{errmsg}}
        </view>
    </view>
</template>

<script>
  // 先导入你需要的 方法
  import { isPhone , isNumber , getByteLength} from "../../utils/index.js"
export default {
  data() {
    return {
      formData:{
        phone:'153980',
        number:0,
        length:'',
      },
      errmsg:null,
      successmsg:null,
      rules:{
        // 对手机号 phone字段进行必填验证
        phone:{
          rules: [{
            required: true,
            errorMessage: '请输入姓名'
          },{ //在此处自定义校验规则 
            validateFunction:function(rule,value,data,callback){
              if(isPhone(value)){
                callback()
              }else{
                callback('请根据手机校验规则输入')
              }
            }
          }]
        },
        // 对 纯数字 字段进行必填验证
        number:{
          rules: [{
            required: true,
            errorMessage: '请输入内容'
          },{
            validateFunction:function(rule,value,data,callback){
              if(isNumber(value)){
                callback()
              }else{
                callback('请输入纯数字')
              }
            }
          }]
        },
        // 对输入的字符长度进行判断 汉字占两个 数字字母算一个
        length:{
          rules: [{
            required: true,
            errorMessage: '请输入内容'
          },{
            validateFunction:function(rule,value,data,callback){
              if(getByteLength(value) > 10){
                callback()
              }else{
                callback('请输入10个以上字符')
              }
            }
          }]
        },
      }
    }
 },
  methods: {
      // 触发提交表单
      submit() {
          this.$refs.form.validate().then(res=>{
            this.successmsg = res
              console.log('表单数据信息：', res);
          }).catch(err =>{
            this.errmsg = err
              console.log('表单错误信息：', err);
          })
      }
  }
}
</script>
/**
 * @author 莫成尘 判断是否中国手机号
 */
export function isPhone(value) {
  const reg = /^1[3-9]\d{9}$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断字符长度
 * 中文算两个 字符 其他算一个
 */
 export function getByteLength(str = '') {
  let len = 0
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
      len += 2
    } else {
      len++
    }
  }
  return len
}
/**
  * @author 莫成尘 判断是否纯数字
 */
export function isNumber(value) {
  const reg = /^-?[0-9]*$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否为IP地址
 */
export function isIP(ip) {
  const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
  return reg.test(ip)
}
/**
 * @author 莫成尘 判断是否为一个url地址
 */
export function isUrl(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}
/**
 * @author 莫成尘 判断是否是小写字母
 */
export function isLowerCase(value) {
  const reg = /^[a-z]+$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否是大写字母
 */
export function isUpperCase(value) {
  const reg = /^[A-Z]+$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否数组
 */
function array(value) {
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);
    } else {
        return Object.prototype.toString.call(value) === "[object Array]";
    }
}
/**
 * @author 莫成尘 判断是否对象
 */
function object(value) {
    return Object.prototype.toString.call(value) === '[object Object]';
}
/**
 * @author 莫成尘 判断是否字符串
 */
export function isString(value) {
  return typeof value === 'string' || value instanceof String
}
/**
 * @author 莫成尘 判断是否身份证
 */
export function isIdCard(value) {
  const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否中文
 */
export function isChina(value) {
  const reg = /^[\u4E00-\u9FA5]{2,4}$/
  return reg.test(value)
}
/**
 * @author 莫成尘 判断是否为空
 */
export function isBlank(value) {
  return (
    value == null ||
    false ||
    value === '' ||
    value.trim() === '' ||
    value.toLocaleLowerCase().trim() === 'null'
  )
}

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无需任何权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

不采集用户数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无广告

许可协议

MIT协议
评论列表 撰写评论

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...