html/jquery 常用的输入与获取参数

文章目录

• ​​1 html 表单组件​​

• ​​1.1 输入框​​
• ​​1.2 单选框​​

• ​​2 js获取参数​​

1 html 表单组件

1.1 输入框

文本

<input id="nickname" type="text" placeholder="请输入昵称">

密码

<input id="password" type="password" placeholder="请输入密码">

邮箱

<input id="email" type="email" placeholder="请输入邮箱">

1.2 单选框

<input class="sex" checked type="radio" name="sex" value="0"><span class="sexname">男</span>
<input class="sex" type="radio" name="sex" value="1"><span class="sexname">女</span>

2 js获取参数

这里以注册用户常用的字段为例

$(function () {
  
}

$("#submit").click(function () {

}

获取值

let nickname = $("#nickname").val();
let username = $("#username").val();
let psd = $("#password").val();
let c_psd = $("#confirm_password").val();
let email = $("#email").val();
// 单选框 性别
let sex = $("input:radio[name='sex']:checked").val();
let phone = $("#phone").val();

if (uname == '' || psd == '' || c_psd == '' || nickname == '') {
  message.showError("昵称、用户名或密码不能为空！！！");
} else if (psd != c_psd) {
  message.showError("密码不一致！！！");
} else {
  message.showSuccess('注册成功！！！')
  $.ajax({
    url: '/register',
    type: 'POST',
    dataType: 'json',
    data: {
      'nickname': nickname,
      'username': uname,
      'password': psd,
      'confirm_password': c_psd,
      'sex': sex,
      'phone': phone,
      'email': email,
    },
    success: function (res) {
      if (res.data == 200) {
      message.showSuccess('注册成功')
      location.href = '/'
      } else if (res.data == 403){
        message.showError('该账号已注册！！！');
      }else if (res.data == 0){
        message.showError('密码不一致！！！');
      }else{
        message.showError(res.info);
      }
    },
    error: function () {
    message.showError('服务器超时，请重试！');
    }
  });
}