文章目录
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('服务器超时，请重试！');
}
});
}
<p><h3>文章目录</h3><ul><ul><li><a href="#1_html__2">1 html 表单组件</a></li><ul><li><a href="#11__4">1.1 输入框</a></li><li><a href="#12__20">1.2 单选框</a></li></ul><li><a href="#2_js_29">2 js获取参数</a></li></ul></ul></p>
<h2><a id="1_html__2"></a>1 html 表单组件</h2>
<h3><a id="11__4"></a>1.1 输入框</h3>
<p>文本</p>
<pre><div class="hljs"><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nickname"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入昵称"</span>></span>
</code></div></pre>
<p>密码</p>
<pre><div class="hljs"><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入密码"</span>></span>
</code></div></pre>
<p>邮箱</p>
<pre><div class="hljs"><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入邮箱"</span>></span>
</code></div></pre>
<h3><a id="12__20"></a>1.2 单选框</h3>
<pre><div class="hljs"><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"0"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sexname"</span>></span>男<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sexname"</span>></span>女<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
</code></div></pre>
<h2><a id="2_js_29"></a>2 js获取参数</h2>
<p>这里以注册用户常用的字段为例</p>
<pre><div class="hljs"><code class="lang-javascript">$(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
}
</code></div></pre>
<pre><div class="hljs"><code class="lang-javascript">$(<span class="hljs-string">"#submit"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
}
</code></div></pre>
<p>获取值</p>
<pre><div class="hljs"><code class="lang-javascript"><span class="hljs-keyword">let</span> nickname = $(<span class="hljs-string">"#nickname"</span>).<span class="hljs-title function_">val</span>();
<span class="hljs-keyword">let</span> username = $(<span class="hljs-string">"#username"</span>).<span class="hljs-title function_">val</span>();
<span class="hljs-keyword">let</span> psd = $(<span class="hljs-string">"#password"</span>).<span class="hljs-title function_">val</span>();
<span class="hljs-keyword">let</span> c_psd = $(<span class="hljs-string">"#confirm_password"</span>).<span class="hljs-title function_">val</span>();
<span class="hljs-keyword">let</span> email = $(<span class="hljs-string">"#email"</span>).<span class="hljs-title function_">val</span>();
<span class="hljs-comment">// 单选框 性别</span>
<span class="hljs-keyword">let</span> sex = $(<span class="hljs-string">"input:radio[name='sex']:checked"</span>).<span class="hljs-title function_">val</span>();
<span class="hljs-keyword">let</span> phone = $(<span class="hljs-string">"#phone"</span>).<span class="hljs-title function_">val</span>();
</code></div></pre>
<pre><div class="hljs"><code class="lang-javascript"><span class="hljs-keyword">if</span> (uname == <span class="hljs-string">''</span> || psd == <span class="hljs-string">''</span> || c_psd == <span class="hljs-string">''</span> || nickname == <span class="hljs-string">''</span>) {
message.<span class="hljs-title function_">showError</span>(<span class="hljs-string">"昵称、用户名或密码不能为空！！！"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (psd != c_psd) {
message.<span class="hljs-title function_">showError</span>(<span class="hljs-string">"密码不一致！！！"</span>);
} <span class="hljs-keyword">else</span> {
message.<span class="hljs-title function_">showSuccess</span>(<span class="hljs-string">'注册成功！！！'</span>)
$.<span class="hljs-title function_">ajax</span>({
<span class="hljs-attr">url</span>: <span class="hljs-string">'/register'</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'POST'</span>,
<span class="hljs-attr">dataType</span>: <span class="hljs-string">'json'</span>,
<span class="hljs-attr">data</span>: {
<span class="hljs-string">'nickname'</span>: nickname,
<span class="hljs-string">'username'</span>: uname,
<span class="hljs-string">'password'</span>: psd,
<span class="hljs-string">'confirm_password'</span>: c_psd,
<span class="hljs-string">'sex'</span>: sex,
<span class="hljs-string">'phone'</span>: phone,
<span class="hljs-string">'email'</span>: email,
},
<span class="hljs-attr">success</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">res</span>) {
<span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span> == <span class="hljs-number">200</span>) {
message.<span class="hljs-title function_">showSuccess</span>(<span class="hljs-string">'注册成功'</span>)
location.<span class="hljs-property">href</span> = <span class="hljs-string">'/'</span>
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span> == <span class="hljs-number">403</span>){
message.<span class="hljs-title function_">showError</span>(<span class="hljs-string">'该账号已注册！！！'</span>);
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span> == <span class="hljs-number">0</span>){
message.<span class="hljs-title function_">showError</span>(<span class="hljs-string">'密码不一致！！！'</span>);
}<span class="hljs-keyword">else</span>{
message.<span class="hljs-title function_">showError</span>(res.<span class="hljs-property">info</span>);
}
},
<span class="hljs-attr">error</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
message.<span class="hljs-title function_">showError</span>(<span class="hljs-string">'服务器超时，请重试！'</span>);
}
});
}
</code></div></pre>
留言