form表单的常用校验

邮箱

export function isEmail(s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

手机号码

export function isMobile(s) {
  return /^1[0-9]{10}$/.test(s)
}

电话号码

export function isPhone(s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

URL地址

export function isURL(s) {
  return /^http[s]?:\/\/.*/.test(s)
}

经度(中国境内:73~136)小数点最多 6 位

export function isLongitude(s) {
  return /^(7[3-9]|[8-9]\d{1}|1[0-2]\d{1}|13[0-6])(\.\d{0,6})$/.test(s)
}

纬度(中国境内:3~54)小数点最多 6 位

export function isLatitude(s) {
  return /^([3-9]|[1-4]\d{1}|5[0-4])(\.\d{0,6})$/.test(s)
}

身份证号码格式

export function validateIdentifyCode(rule, value, callback) {
  if (value == '' || value == null) {
    callback()
  } else if (!isIdentifyCode(value)) {
    callback(new Error('身份证号码格式错误'))
  } else {
    callback()
  }
}
export function isIdentifyCode(s) {
  return /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(s)
}

后面再补充

/**
 * 邮箱
 * @param {*} s
 */
export function isEmail(s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

/**
 * 0-999数值校验
 * @param {*} s
 */
export function isUserNum(s) {
  return /^[1-9][0-9]{0,2}$/.test(s)
}

/**
 * 手机号码
 * @param {*} s
 */
export function isMobile(s) {
  return /^1[0-9]{10}$/.test(s)
}

/**
 * 电话号码
 * @param {*} s
 */
export function isPhone(s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

/**
 * URL地址
 * @param {*} s
 */
export function isURL(s) {
  return /^http[s]?:\/\/.*/.test(s)
}

/**
 * @description 经度(中国境内:73~136)小数点最多 6 位
 */
export function isLongitude(s) {
  return /^(7[3-9]|[8-9]\d{1}|1[0-2]\d{1}|13[0-6])(\.\d{0,6})$/.test(s)
}

/**
 * @description 纬度(中国境内:3~54)小数点最多 6 位
 */
export function isLatitude(s) {
  return /^([3-9]|[1-4]\d{1}|5[0-4])(\.\d{0,6})$/.test(s)
}

export function isIdentifyCode(s) {
  return /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(s)
}

export function validateUserNum(rule, value, callback) {
  if (value == '' || value == null) {
    callback()
  } else if (!isUserNum(value)) {
    callback(new Error('人数在0-999范围内'))
  } else {
    callback()
  }
}

/**
 * valid phone in form
 * @param rule
 * @param value
 * @param callback function()
 */
export function validatePhone(rule, value, callback) {
  if (value == '' || value == null) {
    callback()
  } else if (!isMobile(value)) {
    callback(new Error('手机号码格式错误'))
  } else {
    callback()
  }
}

// 联系电话校验(手机号 / 固定电话)
export function validateContactPhone(rule, value, callback) {
  if (value == '' || value == null) {
    callback()
  } else if (!isMobile(value) && !isPhone(value)) {
    callback(new Error('联系电话格式错误'))
  } else {
    callback()
  }
}

export function validateIdentifyCode(rule, value, callback) {
  if (value == '' || value == null) {
    callback()
  } else if (!isIdentifyCode(value)) {
    callback(new Error('身份证号码格式错误'))
  } else {
    callback()
  }
}

//身份证验证
export function identityNoVali(rule, sId, callback) {
  if (sId == '' || sId == null) {
    callback()
  }
  var iSum = 0
  var sBirthday
  var aCity = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '内蒙古',
    21: '辽宁',
    22: '吉林',
    23: '黑龙江',
    31: '上海',
    32: '江苏',
    33: '浙江',
    34: '安徽',
    35: '福建',
    36: '江西',
    37: '山东',
    41: '河南',
    42: '湖北',
    43: '湖南',
    44: '广东',
    45: '广西',
    46: '海南',
    50: '重庆',
    51: '四川',
    52: '贵州',
    53: '云南',
    54: '西藏',
    61: '陕西',
    62: '甘肃',
    63: '青海',
    64: '宁夏',
    65: '新疆',
    71: '台湾',
    81: '香港',
    82: '澳门',
    91: '国外 '
  }
  if (!/^\d{17}(\d|x)$/i.test(sId)) {
    callback(new Error('你输入的身份证长度或格式错误'))
  }
  sId = sId.replace(/x$/i, 'a')
  if (aCity[parseInt(sId.substr(0, 2))] == null) {
    callback(new Error('你的身份证地区非法'))
  }
  sBirthday = sId.substr(6, 4) + '-' + Number(sId.substr(10, 2)) + '-' + Number(sId.substr(12, 2))
  var d = new Date(sBirthday.replace(/-/g, '/'))
  if (sBirthday != d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()) {
    callback(new Error('身份证上的出生日期非法'))
  }
  for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11)
  if (iSum % 11 != 1) {
    callback(new Error('你输入的身份证号非法'))
  } else {
    callback()
  }
}

/**
 * @description 校验经度
 */
export function validateLongitude(rule, value, callback) {
  if (value == '' || value == null) {
    callback()
  } else if (!isLongitude(value)) {
    callback(new Error('经度不合规则(73~136 小数点最多6位)'))
  } else {
    callback()
  }
}

/**
 * @description 校验纬度
 */
export function validateLatitude(rule, value, callback) {
  if (value == '' || value == null) {
    callback()
  } else if (!isLatitude(value)) {
    callback(new Error('纬度不合规则(3~54 小数点最多6位)'))
  } else {
    callback()
  }
}

/**
 * @description 三位数两位小数
 */
export function validateDecimal3(rule, value, callback) {
  if (!/(^[0-9]{1,3}$)|(^[0-9]{1,3}[\.]{1}[0-9]{1,2}$)/.test(value)) {
    callback(new Error('最大值不能超过3位,小数点2位'))
  } else {
    callback()
  }
}

/**
 * @description 五位数两位小数
 */
export function validateDecimal5(rule, value, callback) {
  if (!/(^[0-9]{1,5}$)|(^[0-9]{1,5}[\.]{1}[0-9]{1,2}$)/.test(value)) {
    callback(new Error('最大值不能超过5位,小数点2位'))
  } else {
    callback()  
  }
}
### HTML Form 表单自定义校验方法实现 对于HTML `form`表单来说,可以通过JavaScript来增强其功能并实现复杂的验证逻辑。现代前端框架如VueReact等提供了更高级别的抽象用于简化这些操作;然而,在纯HTML环境中,依然能够通过原生属性和事件监听器达成目标。 #### 使用HTML5内置约束验证API HTML5引入了一系列新的输入类型以及相应的属性,允许开发者轻松设置基本的验证条件而无需编写额外的脚本。例如: - `required`: 指定该字段不能为空。 - `pattern`: 定义一个正则表达式的模式,用来匹配用户的输入值。 - `min`, `max`, 和 `step`: 对于数值型数据提供范围限制。 当提交带有未满足上述任一条件的表单项时,浏览器会自动阻止提交动作,并显示默认错误提示信息给用户。 ```html <form> <label for="username">用户名:</label> <input type="text" id="username" name="username" required pattern="[a-zA-Z]{3,}" title="至少三个字母"> <button>注册</button> </form> ``` 但是有时候仅靠内建的功能可能不足以覆盖所有的业务需求,这时就需要借助JavaScript来进行更加灵活多变的定制化检验过程[^1]。 #### 利用JavaScript进行复杂校验 如果希望执行更为精细或特定场景下的验证,则可以在表单上附加`submit`事件处理器,在其中调用自定义函数完成必要的检查工作。下面是一个简单的例子展示如何结合HTML标记与JS代码共同作用以达到预期效果: ```javascript document.querySelector('form').addEventListener('submit', function(event){ const usernameField = document.getElementById('username'); // 假设这里有一个异步请求去服务器端查询用户名是否存在 fetch(`/checkUsername?name=${encodeURIComponent(usernameField.value)}`) .then(response => response.json()) .then(data => { if (!data.available) { event.preventDefault(); // 阻止表单提交 alert(`对不起,“${usernameField.value}”已经被占用`); // 或者更新DOM结构向用户提供反馈... } }); }); ``` 此段程序片段展示了怎样利用AJAX技术实现实时可用性检测的同时保持用户体验流畅度不变。当然实际应用中应当考虑更多细节比如网络延迟情况下的处理方式等等[^2]。 另外值得注意的是,在某些情况下还可以采用第三方库(如JQuery Validation Plugin)进一步简化开发流程,不过这超出了当前讨论范畴。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值