我想获取表单 $("#loginForm")里,password的input框的value
时间: 2024-03-01 21:49:55 浏览: 10
您可以通过jQuery的val方法来获取表单中指定input框的value值,示例如下:
```javascript
// 获取密码框的值
var password = $("#loginForm input[name='password']").val();
```
上述代码中,我们使用了jQuery的选择器来获取表单中name属性为password的input框,并使用val方法获取它的值。您可以根据自己的实际情况修改选择器中的name属性值,以获取您需要的input框。
相关问题
gin 框架 表单输入 验证器
在 Gin 框架中,使用 `binding` 标签可以对表单输入进行验证。下面是一个 Gin 框架表单输入验证器的使用示例:
1. 导入 gin 包
```
import "github.com/gin-gonic/gin"
```
2. 创建一个结构体,定义表单输入
```
type LoginForm struct {
Username string `form:"username" binding:"required"`
Password string `form:"password" binding:"required"`
}
```
3. 在路由处理函数中使用验证器
```
func loginHandler(c *gin.Context) {
var form LoginForm
if err := c.ShouldBind(&form); err != nil {
c.HTML(http.StatusBadRequest, "login.html", gin.H{
"error": err.Error(),
})
return
}
// TODO: 处理登录逻辑
}
```
4. 创建一个 HTML 模板,定义表单
```
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
{{ if .error }}
<p style="color: red;">{{ .error }}</p>
{{ end }}
<form method="POST" action="/login">
<label for="username">Username:</label>
<input type="text" name="username" id="username"><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password"><br>
<input type="submit" value="Login">
</form>
</body>
</html>
```
5. 启动服务
```
func main() {
r := gin.Default()
r.LoadHTMLGlob("templates/*")
r.GET("/login", func(c *gin.Context) {
c.HTML(http.StatusOK, "login.html", gin.H{})
})
r.POST("/login", loginHandler)
r.Run(":8080")
}
```
这样,当用户提交登录表单时,会先对表单输入进行校验,如果输入不符合要求,则返回错误信息;如果输入符合要求,则继续处理登录逻辑。
<el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms"> <h1>Hello</h1> <h2>欢迎来到硅谷甄选</h2> <el-form-item prop="username"> <el-input :prefix-icon="User" v-model="loginForm.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>改写为实注册功能
好的,请看以下代码,这是一个简单的注册表单实现:
```
<el-form class="register_form" :model="registerForm" :rules="rules" ref="registerForms">
<h1>欢迎注册</h1>
<el-form-item prop="username">
<el-input :prefix-icon="User" v-model="registerForm.username"></el-input>
</el-form-item>
<el-form-item prop="email">
<el-input :prefix-icon="Email" v-model="registerForm.email"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" :prefix-icon="Lock" v-model="registerForm.password" show-password></el-input>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input type="password" :prefix-icon="Lock" v-model="registerForm.confirmPassword" show-password></el-input>
</el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form>
```
需要注意的是,这个模板中的表单项和验证规则都需要与 `registerForm` 和 `rules` 对象相对应。同时,需要在 `data` 选项中定义这两个对象:
```
data() {
return {
registerForm: {
username: '',
email: '',
password: '',
confirmPassword: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度不能少于 6 位', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: this.checkConfirmPassword, trigger: 'blur' }
]
}
}
},
```
最后,需要在 `methods` 选项中定义 `register` 函数,实现注册逻辑:
```
methods: {
async register() {
await this.$refs.registerForms.validate();
try {
// 调用 API 请求进行注册,并处理返回结果
const res = await api.register(this.registerForm);
if (res.status === 200) {
ElNotification({ type: 'success', message: res.data.message });
this.$router.push('/login');
} else {
ElNotification({ type: 'error', message: res.data.message });
}
} catch (error) {
ElNotification({ type: 'error', message: error.message });
}
},
checkConfirmPassword(rule, value, callback) {
if (value !== this.registerForm.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
}
}
```
这里的 `api` 对象是一个封装了注册接口的 API 请求对象,具体实现方式可能因技术栈不同而有所差异。另外,为了保证数据安全,建议在实际开发过程中采用后端验证的方式,而不是仅依赖前端表单验证。