refactor: enhance phone number validation and input handling in Field and LogInPage components

This commit is contained in:
hamed
2025-11-17 15:09:25 +03:30
parent 5a58c13a4e
commit 2777db3b8c
4 changed files with 51 additions and 8 deletions
+36 -7
View File
@@ -1,6 +1,21 @@
import { TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui";
// تابع تبدیل اعداد فارسی به انگلیسی
const convertPersianToEnglish = (str) => {
const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
let result = str;
for (let i = 0; i < 10; i++) {
const regex = new RegExp(persianNumbers[i], 'g');
result = result.replace(regex, i.toString());
const arabicRegex = new RegExp(arabicNumbers[i], 'g');
result = result.replace(arabicRegex, i.toString());
}
return result;
};
function Field({
title,
error,
@@ -11,6 +26,20 @@ function Field({
value,
updateState,
}) {
const handleChange = (e) => {
let inputValue = e.target.value;
// اگر type تلفن است، فقط اعداد انگلیسی را قبول کن
if (type === "tel") {
// ابتدا اعداد فارسی و عربی را به انگلیسی تبدیل کن
inputValue = convertPersianToEnglish(inputValue);
// فقط اعداد انگلیسی را نگه دار
inputValue = inputValue.replace(/[^0-9]/g, '');
}
updateState(inputValue);
};
return (
<TextField
label={title}
@@ -18,21 +47,21 @@ function Field({
dir={dir || "rtl"}
type={type || "text"}
value={value}
onChange={(e) => updateState(e.target.value)}
onChange={handleChange}
className="!w-full !mx-auto !bg-[#FFF]"
InputProps={inputProps}
placeholder={placeholder || ""}
sx={{
".MuiOutlinedInput-notchedOutline.muirtl-1d3z3hw-MuiOutlinedInput-notchedOutline":
{
border: error && "1px solid red !important",
},
{
border: error && "1px solid red !important",
},
...styleTextSelectRight,
// Hide Icon Number
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
{
display: "none",
},
{
display: "none",
},
"& input[type=number]": {
MozAppearance: "textfield",
},
+7
View File
@@ -4,6 +4,7 @@ import { request } from "@/services/response";
import { InputAdornment, Button } from "@mui/material";
import Link from "next/link";
import { useState } from "react";
import { toast } from "react-toastify";
function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep }) {
const [error, setError] = useState({ valid: true, text: "" });
@@ -11,6 +12,12 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
const handleChange = (val) => {
const checkedNum = validatePhoneNumber(val);
// اگر کاراکتر غیر عددی بود، notification نشون بده
if (!checkedNum.valid && checkedNum.text === "فقط از اعداد انگلیسی استفاده کنید.") {
toast.error("فقط از اعداد انگلیسی استفاده کنید.");
}
setError(checkedNum);
setNum(val);
};
+6
View File
@@ -127,6 +127,12 @@ export function validatePhoneNumber(input) {
return { valid: false, text: "شماره موبایل نمی‌تواند خالی باشد." };
}
// چک کردن اینکه فقط اعداد انگلیسی باشد
const hasNonEnglishDigits = /[^0-9]/.test(input);
if (hasNonEnglishDigits) {
return { valid: false, text: "فقط از اعداد انگلیسی استفاده کنید." };
}
if (input.length !== 11) {
return { valid: false, text: "شماره موبایل باید دقیقا 11 رقم باشد." };
}
+2 -1
View File
@@ -11,13 +11,14 @@ export const request = {
},
removeTokenHead
),
getToken: (grant_type, client_id, client_secret, uuid, code) => {
getToken: (grant_type, client_id, client_secret, uuid, code, scope = "nobat724") => {
const formData = new URLSearchParams();
formData.append("grant_type", grant_type);
formData.append("client_id", client_id);
formData.append("client_secret", client_secret);
formData.append("uuid", uuid);
formData.append("code", code);
formData.append("scope", scope);
return api.post("oauth/token", formData, {
headers: {