表单提交之——input验证

<input name="age" class="w100" type="text" maxlength="3" οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  required />

<input name="phone" class="w400" type="text" placeholder="请输入" οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" required minlength="11"maxlength="11"/>

 

<script>

//表单提交验证
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
var regname = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
var regage = /^(?:[1-9]?\d|100)$/;

if ($("input[name='age']").val().trim().length == 0) {
alert('年龄不能为空');
return false;
}
if (regage.test($("input[name='age']").val()) === false) {
alert('年龄不合法');
return false;
}

</script>

 

转载于:https://www.cnblogs.com/wangyuyanhello/p/7985475.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 Vue 3 的验证功能来验证 Naive UI 的 NInput 组件。以下是一个例子: 首先,您需要在组件中使用 `v-model` 绑定数据。例如: ```html <template> <n-input v-model="name" placeholder="请输入姓名"></n-input> </template> <script> export default { data() { return { name: '' } } } </script> ``` 然后,您可以使用 Vue 3 的验证功能来验证该字段。例如: ```html <template> <n-input v-model="name" placeholder="请输入姓名" :rules="nameRules"></n-input> </template> <script> export default { data() { return { name: '', nameRules: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ] } } } </script> ``` 在上面的代码中,我们为 `name` 字段添加了两个验证规则,一个是必填的,一个是长度在 2 到 10 个字符之间。具体的验证规则可以根据您的需求进行修改。 最后,您需要在提交时调用 `validate` 方法来验证。例如: ```html <template> <n-form ref="form" :model="form" :rules="rules"> <n-input v-model="form.name" placeholder="请输入姓名" :rules="nameRules"></n-input> <!-- 其他项 --> <n-button type="primary" @click="submit">提交</n-button> </n-form> </template> <script> export default { data() { return { form: { name: '', // 其他项 }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ], // 其他项的验证规则 } } }, methods: { submit() { this.$refs.form.validate(valid => { if (valid) { // 验证通过,可以提交 } else { // 验证失败,提示用户 } }) } } } </script> ``` 在上面的代码中,我们使用了 Naive UI 的 NForm 和 NButton 组件,通过调用 `validate` 方法来验证。具体的验证规则可以参考 Vue 3 的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值