jQuery插件使用总结六:nice validator表单验证

一、下载和引用

nice validator 给我们提供了多种使用方式;
我们可以通过npm安装:

$ npm install nice-validator

也可通过bower安装:

$ bower install nice-validator

当然也可以直接下载,下载地址:https://github.com/niceue/nice-validator

二、使用

我这里是下载的文件,因此我们先引入js文件
在这里插入图片描述
在引入js文件时,我们要设置语言为中文:local = zh-CN

我们先做一个简单的表单:

<form action="" id="form">
    <table>
        <tr>
            <td>邮箱</td>
            <td>
                <input type="email" name="email">
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="pwd"></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password" name="repwd"></td>
        </tr>
        <tr>
            <td></td>
            <td><button type="submit">注册</button></td>
        </tr>
    </table>
</form>

首先对邮箱做一下验证:

		$("#form").validator({
            fields: {
                email: "required,email"
            }
        })

required:表示字段必填。
在这里插入图片描述
还可以指定字段的长度,例如我们将密码长度指定为6-10位:

		$("#form").validator({
            fields: {
                pwd: {
                    rule: "length(6~10)",
                    msg: '密码必须必须6-10位',
                    ok: '密码可用',
                    tip: "请输入密码"
                }
            }
        })

rule表示规则,length(6~10)表示长度在6-10位;msg表示提示信息,当该字段未通过验证时,打印的信息;ok表示该字段通过验证后打印的信息,tip为提示,当我们选中输入框时出现的提示信息。
在这里插入图片描述
接下来我们验证密码和确认密码是否相匹配,用match做匹配:

		$("#form").validator({
            fields: {
                pwd: {
                    rule: "length(6~10)",
                    msg: '密码必须必须6-10位',
                    ok: '密码可用',
                    tip: "请输入密码"
                },
                repwd: "match(pwd)",
            }
        })

在这里插入图片描述

更多详细使用请参见官方文档:https://github.com/niceue/nice-validator

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

HusGoose

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值