vue中使用ReCaptcha V3进行验证

注册应用(需科学上网)
https://www.google.com/recaptcha/admin/create
填写注册信息
标签(名称)填写完后,reCaptcha类型选择第3版,接着填写web站点的域名,最后同意协议即可
填写示例图
注册成功获取密钥
上面的是咱们前端的密钥,下面是服务器的
在这里插入图片描述
index.html中的代码
在入口文件引入谷歌代码

  <script src="https://www.recaptcha.net/recaptcha/api.js?render=你的密钥"></script>

js中的代码

// action 参数是自定义的,主要是给后台看。
window.grecaptcha.execute('你的密钥', { action: 'login' }).then((token) => {
	// recaptcha 调用是后台的接口的方法
	recaptcha({ recaptcha: token }).then(({ data }) => {
		// 自行处理方法逻辑
		if (data.success) {
			console.log('你是JOJO')
		}else{
			console.log('你是迪奥')
		}
	})
})

成功后
右下角会显示谷歌图标
在这里插入图片描述
可以通过如下代码隐藏

/* 隐藏谷歌人机校验提示 */
.grecaptcha-badge {
    display: none;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3使用Element Plus进行表单验证,需要先安装Element Plus组件库。然后在需要验证的表单元素上添加相应的验证规则即可。以下是使用Element Plus进行表单验证的步骤: 1. 在Vue3项目安装Element Plus组件库,可以使用npm或yarn进行安装。 2. 在需要使用表单验证的组件引入Element Plus的验证规则: ``` import { defineComponent } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; import { required, email } from 'element-plus/es/utils/validate'; export default defineComponent({ components: { ElForm, ElFormItem, ElInput, ElButton }, setup() { const rules = { email: [{ required: true, message: '请输入邮箱地址' }, { validator: email, message: '请输入正确的邮箱地址' }], password: [{ required: true, message: '请输入密码' }, { min: 6, max: 20, message: '密码长度在6到20个字符之间' }], }; return { rules }; }, }); ``` 3. 在需要验证的表单元素上添加相应的验证规则: ``` <template> <el-form> <el-form-item label="邮箱地址" prop="email"> <el-input v-model="email" :rules="rules.email"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="password" :rules="rules.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> ``` 4. 在表单提交时进行验证: ``` <script> import { defineComponent } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; import { required, email } from 'element-plus/es/utils/validate'; export default defineComponent({ components: { ElForm, ElFormItem, ElInput, ElButton }, setup() { const rules = { email: [{ required: true, message: '请输入邮箱地址' }, { validator: email, message: '请输入正确的邮箱地址' }], password: [{ required: true, message: '请输入密码' }, { min: 6, max: 20, message: '密码长度在6到20个字符之间' }], }; const submitForm = () => { const form = ref(null); form.value.validate((valid) => { if (valid) { console.log('表单验证通过'); } else { console.log('表单验证失败'); } }); }; return { rules, submitForm }; }, }); </script> ``` 以上就是使用Element Plus进行表单验证的步骤。需要注意的是,验证规则需要在setup函数定义,并且需要在表单元素上使用:rules绑定。同时,在表单提交时需要调用validate方法进行验证。 --相关问题--: 1. Vue3如何使用Element Plus进行表单提交? 2. Element Plus还有哪些常用的组件?

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值